@font-face{font-family:Geist;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/8a480f0b521d4e75-s.8e0177b5.woff2)format("woff2");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}@font-face{font-family:Geist;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/7178b3e590c64307-s.b97b3418.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:Geist;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/caa3a2e1cccd8315-s.p.853070df.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:Geist Fallback;src:local(Arial);ascent-override:95.94%;descent-override:28.16%;line-gap-override:0.0%;size-adjust:104.76%}.geist_a71539c9-module__T19VSG__className{font-family:Geist,Geist Fallback;font-style:normal}.geist_a71539c9-module__T19VSG__variable{--font-geist-sans:"Geist","Geist Fallback"}
@font-face{font-family:Geist Mono;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/4fa387ec64143e14-s.c1fdd6c2.woff2)format("woff2");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}@font-face{font-family:Geist Mono;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/bbc41e54d2fcbd21-s.799d8ef8.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:Geist Mono;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/797e433ab948586e-s.p.dbea232f.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:Geist Mono Fallback;src:local(Arial);ascent-override:74.67%;descent-override:21.92%;line-gap-override:0.0%;size-adjust:134.59%}.geist_mono_8d43a2aa-module__8Li5zG__className{font-family:Geist Mono,Geist Mono Fallback;font-style:normal}.geist_mono_8d43a2aa-module__8Li5zG__variable{--font-geist-mono:"Geist Mono","Geist Mono Fallback"}
:root{--background:#fff;--foreground:#171717}@media (prefers-color-scheme:dark){:root{--background:#0a0a0a;--foreground:#ededed}}html,body{max-width:100vw;height:100%;overflow-x:hidden}body{color:var(--foreground);background:var(--background);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Arial,Helvetica,sans-serif;overflow:hidden}:root{--radius-sm:4px;--radius:10px;--radius-full:999px;--border:#e5e7eb;--border-subtle:#f1f5f9;--text-dim:#6b7280;--gradient-accent:#6366f1;--gradient-accent-end:#8b5cf6;--surface:#fff;--surface-alt:#f8fafc;--shadow-sm:0 1px 2px #0000000a,0 1px 1px #0000000a;--shadow:0 4px 16px -4px #00000014,0 2px 4px -1px #0000000f}@media (prefers-color-scheme:dark){:root{--border:#2a2f3a;--border-subtle:#1e2530;--text-dim:#9ca3af;--surface:#11161d;--surface-alt:#1a2029;--shadow-sm:0 1px 2px #0009,0 1px 1px #00000080;--shadow:0 4px 16px -4px #0009,0 2px 4px -1px #00000080}}.layout{grid-template-columns:minmax(72px,260px) minmax(0,680px) minmax(260px,360px);justify-content:center;gap:32px;width:100%;height:100svh;margin:0 auto;padding:0 16px;display:grid;overflow:hidden}.side-left{flex-direction:column;align-self:start;gap:12px;height:100svh;padding:20px 4px 16px;display:flex;position:sticky;top:0}.side-brand{background:linear-gradient(120deg,var(--gradient-accent),var(--gradient-accent-end));color:#0000;-webkit-background-clip:text;background-clip:text;padding:4px 12px 20px;font-size:26px;font-weight:600}.side-nav{flex-direction:column;gap:4px;display:flex}.side-item{color:var(--text-dim);cursor:pointer;text-align:left;background:0 0;border:1px solid #0000;border-radius:50px;align-items:center;gap:16px;padding:12px 18px 12px 14px;font-size:18px;font-weight:500;transition:all .25s;display:flex}.side-item .icon{display:inline-flex}.side-item .label{display:inline-block}.side-item:hover{background:var(--surface-alt);color:var(--foreground)}.side-item.active{background:var(--surface-alt);color:var(--foreground);font-weight:600}.post-cta{background:linear-gradient(120deg,var(--gradient-accent),var(--gradient-accent-end));color:#fff;cursor:pointer;border:none;border-radius:50px;margin-top:12px;padding:14px 0;font-size:16px;font-weight:600;transition:all .25s}.post-cta:hover{filter:brightness(1.08)}.center-col{border-left:1px solid var(--border-subtle);border-right:1px solid var(--border-subtle);-webkit-overflow-scrolling:touch;overscroll-behavior:contain;flex-direction:column;height:100%;padding:0;display:flex;overflow-y:auto}.center-col::-webkit-scrollbar{width:10px}.center-col::-webkit-scrollbar-track{background:0 0}.center-col::-webkit-scrollbar-thumb{background:var(--surface-alt);border-radius:20px}.center-col>:first-child{margin-top:20px}.side-right{flex-direction:column;align-self:start;gap:20px;height:100svh;padding:16px 0 24px;display:flex;position:sticky;top:0}.search-bar{padding:4px 0 0}.search-bar input{background:var(--surface-alt);border:1px solid var(--border-subtle);border-radius:50px;outline:none;width:100%;padding:10px 16px;font-size:14px;transition:all .25s}.search-bar input:focus{border-color:var(--gradient-accent);box-shadow:0 0 0 1px var(--gradient-accent)}.panel{background:var(--surface);border:1px solid var(--border-subtle);box-shadow:var(--shadow-sm);border-radius:20px;flex-direction:column;gap:12px;padding:16px 18px 18px;display:flex}.panel-title{font-size:16px;font-weight:600}.panel-list{flex-direction:column;gap:4px;margin:0;padding:0;list-style:none;display:flex}.panel-item{text-align:left;cursor:pointer;width:100%;color:var(--foreground);background:0 0;border:1px solid #0000;border-radius:12px;padding:10px 12px;font-size:14px;line-height:1.4;transition:all .25s}.panel-item:hover{background:var(--surface-alt)}.side-footer{color:var(--text-dim);margin-top:auto;padding:0 4px;font-size:12px}.mobile-topbar{display:none}@media (prefers-color-scheme:dark){.side-item:hover,.side-item.active,.panel-item:hover,.search-bar input{background:#1e2530}.search-bar input:focus{background:#25303d}.center-col{border-color:#1e2530}}@media (max-width:1300px){.layout{grid-template-columns:minmax(72px,88px) minmax(0,680px) minmax(260px,320px);gap:16px}.side-item .label{display:none}.post-cta{padding:14px;font-size:0;line-height:0}}@media (max-width:1100px){.layout{grid-template-columns:minmax(72px,88px) minmax(0,680px)}.side-right{display:none}}@media (max-width:750px){body{overflow:auto}.layout{height:auto;padding:0;display:block}.side-left{display:none}.center-col{border:none;height:auto;overflow:visible}.mobile-topbar{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--border-subtle);z-index:50;background:#ffffffd9;align-items:center;gap:8px;padding:10px 14px;font-size:18px;font-weight:600;display:flex;position:sticky;top:0}}@media (max-width:750px) and (prefers-color-scheme:dark){.mobile-topbar{background:#11161dcc}}@media (max-width:750px){.feed-container{padding:0 16px 60px}}.feed-container{flex-direction:column;gap:32px;width:100%;max-width:680px;display:flex}.post-list{flex-direction:column;gap:20px;list-style:none;display:flex}.post-card{background:var(--surface);border:1px solid var(--border-subtle);box-shadow:var(--shadow-sm);border-radius:20px;gap:14px;padding:18px 20px 16px;transition:all .25s;display:flex;position:relative}.post-card[data-playing]{border-color:var(--gradient-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--gradient-accent)45%,transparent),var(--shadow-sm)}.post-card:before{content:"";border-radius:inherit;-webkit-mask-composite:xor;opacity:0;pointer-events:none;background:linear-gradient(140deg,#6366f126,#8b5cf61f);padding:1px;transition:all .4s;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.post-card:hover:before{opacity:1}@media (prefers-color-scheme:dark){.post-card{background:var(--surface)}}.post-body{flex-direction:column;flex:1;gap:8px;display:flex}.post-header{align-items:center;gap:8px;font-size:13px;display:flex}.user-name{font-size:14px;font-weight:600}.user-handle{color:var(--text-dim)}.time{color:var(--text-dim);font-variant-numeric:tabular-nums;margin-left:auto}.post-title{font-size:15px;font-weight:500}.notes-block{font-family:var(--font-geist-mono,monospace);background:var(--surface-alt);white-space:pre-wrap;word-break:break-word;background-image:linear-gradient(135deg,#6366f114,#8b5cf614);border-radius:14px;padding:10px 12px;font-size:13px;line-height:1.4}.description{color:var(--text-dim);font-size:14px;line-height:1.5}.actions-row{gap:4px;margin-top:4px;display:flex}.icon-btn{background:var(--surface-alt);border:1px solid var(--border-subtle);border-radius:var(--radius-full);color:var(--text-dim);cursor:pointer;align-items:center;gap:4px;padding:6px 10px;font-size:12px;transition:all .25s;display:inline-flex}.icon-btn:hover{color:var(--foreground);background:var(--surface);box-shadow:var(--shadow-sm)}.icon-btn span{font-variant-numeric:tabular-nums}@media (prefers-color-scheme:dark){.icon-btn{background:#1e2530}.icon-btn:hover{background:#25303d}}.composer{background:var(--surface);border:1px solid var(--border-subtle);box-shadow:var(--shadow-sm);border-radius:24px;flex-direction:column;gap:8px;padding:20px 22px 18px;display:flex}.composer textarea{resize:vertical;border:1px solid var(--border-subtle);background:var(--surface-alt);width:100%;font:14px/1.5 var(--font-geist-mono,monospace);border-radius:16px;outline:none;padding:12px 14px;transition:all .25s}.composer textarea:focus{border-color:var(--gradient-accent);box-shadow:0 0 0 1px var(--gradient-accent),0 0 0 4px #6366f126}.composer-notes{min-height:68px}.composer-desc{min-height:52px;font-family:var(--font-geist-sans,Arial)}.composer-actions{justify-content:space-between;align-items:center;margin-top:4px;display:flex}.hint{color:var(--text-dim);font-size:12px}.publish-btn{background:linear-gradient(120deg,var(--gradient-accent),var(--gradient-accent-end));color:#fff;border-radius:var(--radius-full);cursor:pointer;letter-spacing:.5px;box-shadow:var(--shadow-sm);border:none;padding:10px 22px;font-size:14px;font-weight:500;transition:all .25s}.publish-btn:hover{filter:brightness(1.08)}.publish-btn:disabled{opacity:.45;cursor:not-allowed}.mini-btn{background:var(--surface-alt);border:1px solid var(--border-subtle);border-radius:var(--radius-full);cursor:pointer;padding:8px 14px;font-size:13px;transition:all .25s}.mini-btn:hover{background:var(--surface)}.mini-btn:disabled{opacity:.4;cursor:not-allowed}.piano-row{flex-wrap:wrap;gap:4px;margin-top:10px;display:flex}.piano-key{background:var(--surface-alt);border:1px solid var(--border-subtle);cursor:pointer;letter-spacing:.5px;text-align:center;border-radius:10px;min-width:38px;padding:6px 10px;font-size:12px;transition:all .25s;position:relative}.piano-key.sharp{color:#fff;background:linear-gradient(135deg,#444,#222);border-color:#333}@media (prefers-color-scheme:dark){.piano-key{background:#1e2530}.piano-key.sharp{background:linear-gradient(135deg,#555,#333)}}.piano-key:hover{background:var(--surface);box-shadow:var(--shadow-sm)}.piano-key.util{background:var(--gradient-accent);color:#fff;border-color:#0000;font-weight:500}.piano-key.util:hover{filter:brightness(1.1)}.mini-roll{border:1px solid var(--border-subtle);background:var(--surface-alt);box-shadow:var(--shadow-sm);border-radius:18px;margin-top:8px;overflow:hidden}.mini-roll svg{width:100%;height:130px;display:block}@media (max-width:700px){.mini-roll svg{height:110px}}.feed-sentinel{width:100%;height:1px}.infinite-status{justify-content:center;padding:24px 0 40px;display:flex}.loader{border:4px solid var(--border-subtle);border-top-color:var(--gradient-accent);border-radius:50%;width:34px;height:34px;animation:.9s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.end-text{color:var(--text-dim);border:1px solid var(--border-subtle);background:var(--surface-alt);border-radius:40px;padding:4px 12px;font-size:12px}.adv-kb-wrapper{margin-top:16px}.toggle-adv{background:var(--surface-alt);border:1px solid var(--border-subtle);border-radius:var(--radius-full);cursor:pointer;color:var(--text-dim);padding:8px 14px;font-size:12px;transition:all .25s}.toggle-adv:hover{background:var(--surface);color:var(--foreground)}.adv-panel{border:1px solid var(--border-subtle);background:var(--surface);box-shadow:var(--shadow-sm);border-radius:24px;margin-top:10px;padding:16px 18px 20px}.kb-controls{flex-wrap:wrap;gap:18px;margin-bottom:14px;display:flex}.control-group{flex-direction:column;gap:6px;font-size:12px;display:flex}.control-group label{color:var(--text-dim);font-weight:500}.seg{background:var(--surface-alt);border-radius:14px;gap:4px;padding:4px;display:flex}.seg-btn{cursor:pointer;color:var(--text-dim);background:0 0;border:none;border-radius:10px;padding:6px 10px;font-size:12px;transition:all .25s}.seg-btn.active{background:linear-gradient(120deg,var(--gradient-accent),var(--gradient-accent-end));color:#fff}.seg-btn:not(.active):hover{background:var(--surface);color:var(--foreground)}.piano-full{gap:12px;padding-bottom:4px;display:flex;position:relative;overflow-x:auto}.octave-col{width:260px;height:140px;position:relative}.white-keys{grid-template-columns:repeat(7,1fr);display:grid;position:absolute;inset:0}.key.white{border:1px solid var(--border-subtle);cursor:pointer;background:linear-gradient(#fff,#f5f5f5);border-left:none;border-radius:0;justify-content:center;align-items:flex-end;padding-bottom:6px;font-size:11px;font-weight:500;display:flex;position:relative}.key.white:first-child{border-left:1px solid var(--border-subtle);border-top-left-radius:10px;border-bottom-left-radius:10px}.key.white:last-child{border-top-right-radius:10px;border-bottom-right-radius:10px}.key.white:not(:last-child):after{content:"";pointer-events:none;background:linear-gradient(#00000014,#00000005);width:2px;height:100%;position:absolute;top:0;right:0}.key.white:hover{background:#fff}@media (prefers-color-scheme:dark){.key.white{background:linear-gradient(#1e2530,#161d25)}.key.white:not(:last-child):after{background:linear-gradient(#ffffff14,#ffffff05)}.key.white:hover{background:#222b37}}.black-keys{pointer-events:none;height:72px;position:absolute;top:0;left:0;right:0}.key.black{color:#eee;cursor:pointer;pointer-events:auto;background:linear-gradient(#111,#2b2b2b);border:1px solid #1d1d1d;border-radius:6px 6px 8px 8px;justify-content:center;align-items:flex-end;width:28px;height:72px;padding-bottom:4px;font-size:10px;display:flex;position:absolute;transform:translate(-50%);box-shadow:0 4px 6px -2px #0000008c}.key.black:hover{filter:brightness(1.18)}@media (prefers-color-scheme:dark){.key.black{background:linear-gradient(#222,#444);border-color:#333}}.piano-full::-webkit-scrollbar{height:8px}.piano-full::-webkit-scrollbar-track{background:var(--surface-alt);border-radius:100px}.piano-full::-webkit-scrollbar-thumb{background:linear-gradient(120deg,var(--gradient-accent),var(--gradient-accent-end));border-radius:100px}.avatar{color:#fff;letter-spacing:.5px;width:44px;height:44px;box-shadow:var(--shadow-sm);background:var(--gradient-accent);text-transform:uppercase;border-radius:14px;justify-content:center;align-items:center;font-size:18px;font-weight:600;display:flex}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (max-width:700px){.feed-container{gap:24px}.post-card,.composer{padding:16px 16px 14px}.avatar{width:40px;height:40px;font-size:16px}.app-header{padding:8px 16px}}*{box-sizing:border-box;margin:0;padding:0}a{color:inherit;text-decoration:none}@media (prefers-color-scheme:dark){html{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}