:root{--bg: #faf9f6;--bg-2: #f1efe9;--bg-3: #e7e4db;--text: #12100e;--muted: #56514a;--faint: #67614f;--line: rgba(18, 16, 14, .14);--line-strong: rgba(18, 16, 14, .3);--accent: #5a21e0;--accent-soft: #ede7ff;--accent-ink: #ffffff;--accent-2: #6d8c00;--accent-2-fill: #c6ff3d;--accent-2-ink: #17200a;--wash-a: rgba(90, 33, 224, .16);--wash-b: rgba(198, 255, 61, .2);--wash-c: rgba(90, 33, 224, .06);--font-display: "Bricolage Grotesque", "SF Pro Display", -apple-system, system-ui, sans-serif;--font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;--ratio: 1.62;--step-0: .95rem;--step-1: 1.15rem;--step-2: 1.6rem;--step-3: 2.6rem;--ease: cubic-bezier(.22, 1, .36, 1);--dur: .32s}@media (prefers-color-scheme: dark){:root:not([data-theme=light]){--bg: #0b0a0f;--bg-2: #131120;--bg-3: #1c1930;--text: #f5f3ee;--muted: #a49db4;--faint: #948ca8;--line: rgba(245, 243, 238, .14);--line-strong: rgba(245, 243, 238, .32);--accent: #9b7bff;--accent-soft: #241a45;--accent-ink: #0b0a0f;--accent-2: #c6ff3d;--accent-2-fill: #c6ff3d;--accent-2-ink: #17200a;--wash-a: rgba(124, 77, 255, .3);--wash-b: rgba(198, 255, 61, .16);--wash-c: rgba(155, 123, 255, .1)}}:root[data-theme=dark]{--bg: #0b0a0f;--bg-2: #131120;--bg-3: #1c1930;--text: #f5f3ee;--muted: #a49db4;--faint: #948ca8;--line: rgba(245, 243, 238, .14);--line-strong: rgba(245, 243, 238, .32);--accent: #9b7bff;--accent-soft: #241a45;--accent-ink: #0b0a0f;--accent-2: #c6ff3d;--accent-2-fill: #c6ff3d;--accent-2-ink: #17200a;--wash-a: rgba(124, 77, 255, .3);--wash-b: rgba(198, 255, 61, .16);--wash-c: rgba(155, 123, 255, .1)}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-display);font-variation-settings:"opsz" 14,"wdth" 100,"wght" 400;font-size:var(--step-0);line-height:1.45;-webkit-font-smoothing:antialiased;transition:background var(--dur) var(--ease),color var(--dur) var(--ease);overflow-x:hidden}button{font:inherit;color:inherit;cursor:pointer}:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}.wash{position:fixed;inset:-20%;z-index:0;pointer-events:none;background:radial-gradient(46% 44% at 18% 24%,var(--wash-a) 0%,transparent 62%),radial-gradient(38% 40% at 82% 18%,var(--wash-b) 0%,transparent 60%),radial-gradient(60% 55% at 62% 88%,var(--wash-c) 0%,transparent 66%);filter:blur(12px);animation:drift 38s linear infinite alternate}@keyframes drift{0%{transform:translate3d(-2%,-1%,0) scale(1.02)}50%{transform:translate3d(2%,2%,0) scale(1.08)}to{transform:translate3d(-1%,1%,0) scale(1.03)}}.shell{position:relative;z-index:1;min-height:100%;display:flex;flex-direction:column;max-width:1400px;margin:0 auto;padding:0 clamp(16px,3.2vw,48px) 0}.top{display:flex;align-items:center;gap:18px;padding:18px 0 14px;border-bottom:1px solid var(--line);animation:riseIn .52s var(--ease) both}.brand{font-variation-settings:"opsz" 32,"wdth" 88,"wght" 800;font-size:1.4rem;letter-spacing:-.03em;margin:0;display:flex;align-items:baseline;gap:9px}.brand em{font-style:normal;color:var(--accent)}.brand span{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;color:var(--faint);text-transform:uppercase;font-variation-settings:normal}.top-spacer{flex:1}.chiprow{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.chip{appearance:none;border:1px solid var(--line);background:transparent;color:var(--muted);padding:6px 11px;border-radius:999px;font-size:.8rem;font-variation-settings:"wght" 500;transition:background .14s var(--ease),color .14s var(--ease),border-color .14s var(--ease),transform .14s var(--ease);white-space:nowrap}.chip:hover{border-color:var(--line-strong);color:var(--text);transform:translateY(-1px)}.chip:active{transform:translateY(0) scale(.97)}.chip[aria-pressed=true],.chip.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.chip.lime[aria-pressed=true]{background:var(--accent-2-fill);border-color:var(--accent-2-fill);color:var(--accent-2-ink)}.chip.icon{padding:6px 9px;display:inline-flex;align-items:center}.controls{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:flex-end;padding:18px 0;border-bottom:1px solid var(--line);animation:riseIn .56s 60ms var(--ease) both}.field{display:flex;flex-direction:column;gap:7px}.field>label,.field>.lbl{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}.select{appearance:none;background:var(--bg-2);border:1px solid var(--line);color:var(--text);font-family:inherit;font-size:.92rem;font-variation-settings:"wght" 550;padding:8px 30px 8px 12px;border-radius:8px;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 16px) 55%,calc(100% - 11px) 55%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;transition:border-color .14s var(--ease),background-color .14s var(--ease)}.select:hover{border-color:var(--line-strong)}.slider{appearance:none;width:132px;height:22px;background:transparent}.slider::-webkit-slider-runnable-track{height:3px;background:var(--line-strong);border-radius:2px}.slider::-webkit-slider-thumb{appearance:none;width:15px;height:15px;margin-top:-6px;border-radius:50%;background:var(--accent);border:2px solid var(--bg);transition:transform .14s var(--ease)}.slider:hover::-webkit-slider-thumb{transform:scale(1.18)}.slider::-moz-range-track{height:3px;background:var(--line-strong);border-radius:2px}.slider::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:var(--accent);border:2px solid var(--bg)}.hero{flex:1;display:flex;flex-direction:column;justify-content:center;padding:clamp(14px,2.2vh,28px) 0;min-height:0;gap:0}.meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px;margin-bottom:clamp(14px,2.4vh,26px);animation:riseIn .5s .12s var(--ease) both}.meta .keyname{font-variation-settings:"opsz" 40,"wdth" 84,"wght" 700;font-size:clamp(1.5rem,3.1vw,2.5rem);letter-spacing:-.032em;margin:0;line-height:1}.meta .tag{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.06em;color:var(--muted)}.meta .tag.unit{text-transform:uppercase}.meta .tag.prose{font-family:var(--font-display);font-size:.82rem;letter-spacing:0;color:var(--faint)}.meta .tag b{color:var(--text);font-weight:600}.progression{display:grid;grid-auto-flow:column;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);min-height:clamp(112px,19vh,186px);position:relative;overflow:hidden}.slot{border-right:1px solid var(--line);padding:13px 9px 11px;display:flex;flex-direction:column;justify-content:space-between;position:relative;min-width:0;background:transparent;transition:background .22s var(--ease);animation:cascade .52s var(--ease) both;animation-delay:calc(var(--i) * 55ms);container-type:inline-size}.slot:last-child{border-right:0}.slot.barline{border-right-color:var(--line-strong)}.slot.split{background:color-mix(in srgb,var(--accent) 5%,transparent)}.slot.section-b{background:color-mix(in srgb,var(--accent-2-fill) 8%,transparent)}.slot.active{background:color-mix(in srgb,var(--accent) 13%,transparent)}.slot .sym{display:flex;flex-direction:column;align-items:flex-start;line-height:.92;min-width:0}.slot .sym .root{font-variation-settings:"opsz" 72,"wdth" 78,"wght" 680;font-size:clamp(1.05rem,34cqw,3.1rem);letter-spacing:-.05em}.slot .sym .ext{font-variation-settings:"opsz" 18,"wdth" 82,"wght" 520;font-size:clamp(.66rem,15cqw,1.28rem);letter-spacing:-.015em;color:var(--muted);margin-top:2px;overflow-wrap:anywhere}.slot .sym .slash{color:var(--accent);font-variation-settings:"wght" 620}@container (max-width: 96px){.slot .foot .inv{display:none}.slot .foot{flex-wrap:wrap;gap:3px 5px}}.slot .foot{display:flex;align-items:baseline;gap:7px;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.05em;color:var(--faint);margin-top:10px}.slot .roman{color:var(--accent);font-weight:600}.slot .push{color:var(--accent-2);font-weight:600;letter-spacing:.08em}.slot .inv{color:var(--muted)}.playhead{position:absolute;top:0;bottom:0;width:2px;background:var(--accent-2-fill);box-shadow:0 0 12px 1px var(--accent-2-fill);pointer-events:none;z-index:3}.roll{margin-top:16px;height:clamp(76px,13vh,130px);border:1px solid var(--line);position:relative;overflow:hidden;background:var(--bg-2);animation:riseIn .56s .2s var(--ease) both}.roll .grid-bar{position:absolute;top:0;bottom:0;width:1px;background:var(--line)}.roll .grid-bar.strong{background:var(--line-strong)}.roll .note{position:absolute;height:3px;border-radius:1px;background:var(--accent);animation:noteIn .42s var(--ease) both;animation-delay:calc(var(--d) * 1ms)}.roll .note.bass{background:var(--accent-2)}.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:18px 0 26px;animation:riseIn .6s .24s var(--ease) both}.generate{appearance:none;border:0;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-variation-settings:"opsz" 32,"wdth" 92,"wght" 700;font-size:clamp(1rem,1.7vw,1.3rem);letter-spacing:-.015em;padding:15px 34px;display:inline-flex;align-items:center;gap:11px;position:relative;overflow:hidden;transition:transform .15s var(--ease),box-shadow .15s var(--ease),background .15s var(--ease);box-shadow:0 2px color-mix(in srgb,var(--accent) 55%,#000)}.generate:hover{transform:translateY(-2px);box-shadow:0 5px color-mix(in srgb,var(--accent) 55%,#000)}.generate:active{transform:translateY(1px);box-shadow:0 1px color-mix(in srgb,var(--accent) 55%,#000)}.generate kbd{font-family:var(--font-mono);font-size:.62rem;border:1px solid color-mix(in srgb,var(--accent-ink) 45%,transparent);border-radius:4px;padding:2px 6px;opacity:.85}.btn{appearance:none;border:1px solid var(--line-strong);background:transparent;border-radius:999px;padding:12px 20px;font-variation-settings:"wght" 600;font-size:.9rem;display:inline-flex;align-items:center;gap:8px;transition:transform .15s var(--ease),background .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease)}.btn:hover{transform:translateY(-2px);border-color:var(--accent);color:var(--accent)}.btn:active{transform:translateY(0) scale(.98)}.btn.primary-2{background:var(--accent-2-fill);border-color:var(--accent-2-fill);color:var(--accent-2-ink)}.btn.primary-2:hover{color:var(--accent-2-ink);filter:brightness(1.06)}.seedbox{display:flex;align-items:center;gap:6px;margin-left:auto;font-family:var(--font-mono);font-size:.72rem;color:var(--faint)}.seedbox input{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.06em;width:calc(7ch + .42em + 20px);background:var(--bg-2);border:1px solid var(--line);color:var(--text);border-radius:6px;padding:7px 8px;text-transform:uppercase}.seedbox input:hover{border-color:var(--line-strong)}.info-btn{position:fixed;right:16px;bottom:16px;z-index:40;width:38px;height:38px;border-radius:999px;border:1px solid var(--line-strong);background:var(--bg-2);color:var(--muted);display:grid;place-items:center;font-variation-settings:"wght" 700;transition:transform .16s var(--ease),color .16s var(--ease),border-color .16s var(--ease)}.info-btn:hover{transform:translateY(-2px) scale(1.05);color:var(--accent);border-color:var(--accent)}dialog.about{border:1px solid var(--line-strong);border-radius:14px;background:var(--bg);color:var(--text);padding:0;max-width:380px;width:calc(100% - 32px)}dialog.about::backdrop{background:#00000080;backdrop-filter:blur(3px)}dialog.about[open]{animation:popIn .26s var(--ease) both}.about-inner{padding:24px 24px 18px}.about-inner h2{margin:0 0 6px;font-variation-settings:"opsz" 36,"wdth" 86,"wght" 780;font-size:1.45rem;letter-spacing:-.03em}.about-inner p{margin:0 0 12px;color:var(--muted);font-size:.88rem}.about-inner a{color:var(--accent);font-variation-settings:"wght" 600}.about-foot{display:flex;justify-content:flex-end;padding:0 24px 20px}@keyframes riseIn{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}@keyframes cascade{0%{opacity:0;transform:translateY(26px) scaleY(.92)}to{opacity:1;transform:none}}@keyframes noteIn{0%{opacity:0;transform:scaleX(.1);transform-origin:left}to{opacity:1;transform:none}}@keyframes popIn{0%{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}@media (max-width: 720px){.progression{grid-auto-flow:row;grid-template-columns:1fr!important;grid-auto-rows:minmax(58px,auto);min-height:0;max-height:44vh;overflow-y:auto}.slot{border-right:0;border-bottom:1px solid var(--line);flex-direction:row;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px}.slot .sym{flex-direction:row;align-items:baseline;gap:5px}.slot .sym .root{font-size:1.55rem}.slot .sym .ext{font-size:.85rem;margin-top:0}.slot .foot{margin-top:0;flex-shrink:0}.slot .foot .inv{display:inline}.playhead{display:none}.seedbox{margin-left:0;width:100%}.meta .keyname{font-size:1.6rem}.shell{padding-bottom:68px}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.cx-value{color:var(--accent);font-variation-settings:"wght" 600;font-family:var(--font-display);letter-spacing:0;text-transform:none;font-size:.72rem}.btn.star.on{border-color:var(--accent-2-fill);color:var(--accent-2)}dialog.favs{border:1px solid var(--line-strong);border-radius:14px;background:var(--bg);color:var(--text);padding:0;width:min(620px,calc(100% - 32px));max-height:min(78vh,720px);overflow:hidden}dialog.favs[open]{display:flex;flex-direction:column}dialog.favs::backdrop{background:#00000080;backdrop-filter:blur(3px)}dialog.favs[open]{animation:popIn .26s var(--ease) both}.favs-head{display:flex;align-items:baseline;gap:12px;padding:20px 22px 14px;border-bottom:1px solid var(--line)}.favs-head h2{margin:0;font-variation-settings:"opsz" 36,"wdth" 86,"wght" 780;font-size:1.3rem;letter-spacing:-.03em}.favs-count{font-family:var(--font-mono);font-size:.66rem;color:var(--faint);flex:1}.favs-empty,.favs-warn{margin:0;padding:24px 22px;color:var(--muted);font-size:.88rem}.favs-warn{padding:14px 22px;color:var(--accent);border-bottom:1px solid var(--line)}.favs-empty kbd{font-family:var(--font-mono);font-size:.72rem;border:1px solid var(--line-strong);border-radius:4px;padding:1px 5px}.favs-list{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1}.favs-list li{display:flex;align-items:center;gap:8px;padding:0 14px 0 0;border-bottom:1px solid var(--line);animation:cascade .38s var(--ease) both}.favs-list li:last-child{border-bottom:0}.favs-recall{flex:1;min-width:0;appearance:none;border:0;background:transparent;text-align:left;padding:13px 14px;display:flex;flex-direction:column;gap:3px;transition:background .14s var(--ease)}.favs-recall:hover{background:var(--bg-2)}.favs-key{font-variation-settings:"opsz" 24,"wdth" 88,"wght" 700;font-size:1rem;letter-spacing:-.02em}.favs-chords{font-variation-settings:"wght" 500;font-size:.86rem;color:var(--accent);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.favs-meta{font-family:var(--font-mono);font-size:.62rem;color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.favs-actions{display:flex;gap:5px;flex-shrink:0}.favs-foot{padding:12px 22px;border-top:1px solid var(--line);display:flex;justify-content:flex-end}@media (max-width: 720px){.favs-list li{flex-wrap:wrap;padding-bottom:8px}.favs-actions{padding-left:14px}}