@import "https://fonts.googleapis.com/css2?family=Geist+Mono:wght@300;400;500;600;700&display=swap";@import "https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400&display=swap";:root{--c-type:#7ae093;--c-type-bg:#cfffdf;--c-inversion:#44a8ff;--c-inversion-bg:#d1f0ff;--c-secondary:#e092ff;--c-secondary-bg:#f4daff;--c-play:#8b96ff;--c-play-bg:#e4e7fb;--c-play-ink:#0b188e;--c-play-glow:#8a95ff4d;--key-hi-bg:#cdd0f4;--key-hi-bg-black:#313772;--key-hi-glow:#8a95ff59;--label-transform:none;--label-tracking:0;--label-size:11px;--footer-transform:lowercase;--control-h:37px;--c-select:#0d99ff;--c-ink:#353535;--c-border:#dbdbdb;--c-border-hover:#bbb;--c-card-border:#0003;--tile-selected-border:#999;--tile-selected-bg:#f8f8f8;--tile-sel-ring-w:0px;--surface-card:linear-gradient(-65deg, #fff 1%, #f4f4f4 100%);--surface-panel:linear-gradient(126deg, #fdfdfd 1%, #f2f2f2 100%);--surface-piano:linear-gradient(118deg, #fdfdfd, #f2f2f2);--surface-btn:linear-gradient(180deg, #fff 0%, #f1f1f1 100%);--surface-btn-hover:linear-gradient(180deg, #fff 0%, #eaeaea 100%);--surface-tile:linear-gradient(180deg, #fff 0%, #f6f6f6 100%);--pad-card-top:22px;--pad-card-x:28px;--pad-card-bottom:26px;--gap-card:12px;--gap-grid:10px;--gap-bottom:10px;--gap-btn:9px;--pad-panel-top:10px;--pad-panel-x:20px;--pad-panel-bottom:16px;--pad-tile:6px;--pad-piano-y:16px;--pad-piano-x:12px;--gap-key:2px;--r-card:20px;--r-panel:10px;--r-tile:9px;--r-btn:7px;--r-key:4px;--r-control:8px;--r-pad:12px;--bw-tile:1.4px;--toggle-bg:var(--c-border);--sh-oct:var(--sh-control);--sh-oct-active:inset 0 2px 3px #00000024;--sh-card:0 20px 50px #00000040, inset 0 1px 0 #fffc;--sh-btn:0 2px 0 #dbdbdb, 0 3px 6px #00000024;--sh-btn-active:0 0 0 #dbdbdb, inset 0 2px 3px #00000024;--sh-btn-sel:0 0 0 #dbdbdb, inset 0 2px 3px #00000024;--sh-tile:0 2px 0 #dbdbdb, 0 3px 8px #0000001a;--sh-tile-active:0 0 0 #dbdbdb, inset 0 2px 5px #0000001f, 0 0 10px var(--c-play-glow);--sh-key:0 3px 0 #dbdbdb, 0 5px 6px #00000024;--sh-key-active:0 1px 0 #dbdbdb, inset 0 1px 2px #0000001f, 0 0 8px var(--key-hi-glow);--sh-key-black:none;--sh-key-black-active:0 0 8px var(--key-hi-glow);--sh-control:0 1px 0 #dbdbdb, 0 2px 4px #0000001a;--btn-press-y:2px;--btn-sel-y:2px;--tile-press-y:2px;--key-press-y:2px;--strum-palette:spectrum;--strum-sat:1.6;--strum-frame:0;--strum-frame-alpha:.12;--strum-labels:1;--strum-end-dots:1;--strum-string-w:1.4;--strum-bg-dots:1;--strum-anim:1;--strum-anim-style:center;--strum-anim-stagger:0;--strum-pick:#353535;--strum-pad-top:14;--strum-pad-bottom:8;--strum-label-gap:13;--pluck-flash:lighten;--pluck-flash-ms:700;--pluck-flash-lighten:100;--pluck-flash-mix:100;--pluck-flash-black:darken;--pluck-flash-black-l:38;--pluck-flash-vel:1;--anim-octave:slide;--xhair:1;--xhair-pulse:lines;--xhair-color:#d05050d9}*{box-sizing:border-box;margin:0;padding:0}body{color:#353535;-webkit-tap-highlight-color:transparent;background-color:#111;flex-direction:column;justify-content:center;align-items:center;min-height:100dvh;font-family:Geist Mono,SF Mono,Fira Code,monospace;display:flex}@media (pointer:coarse){body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}input,textarea{-webkit-user-select:text;user-select:text}}.app-card{z-index:2;background:var(--surface-card);border:1px solid var(--c-card-border);border-radius:var(--r-card);box-shadow:var(--sh-card);padding:var(--pad-card-top) var(--pad-card-x) var(--pad-card-bottom);gap:var(--gap-card);flex-direction:column;width:740px;max-width:calc(100vw - 40px);display:flex;position:relative}.app-card.intro-hidden{opacity:0;pointer-events:none;transform:scale(.985)}.app-card.intro-forming{animation:.55s cubic-bezier(.22,.9,.3,1) forwards app-card-form-in}.app-card.intro-forming>*{opacity:0;animation:.42s ease-out forwards app-card-child-in}.app-card.intro-forming>:first-child{animation-delay:.26s}.app-card.intro-forming>:nth-child(2){animation-delay:.34s}.app-card.intro-forming>:nth-child(3){animation-delay:.42s}.app-card.intro-forming>:nth-child(4){animation-delay:.5s}@keyframes app-card-form-in{0%{opacity:0;transform:scale(.985)}to{opacity:1;transform:scale(1)}}@keyframes app-card-child-in{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.app-footer-wrap{display:contents}.app-footer-wrap.intro-pending>.app-footer{opacity:0;pointer-events:none}.app-footer-wrap>.app-footer{transition:opacity .45s}.app-footer-wrap.footer-above>.app-footer{margin-top:0;margin-bottom:20px}.app-footer-wrap.looper-entering:not(.footer-above)>.app-footer{opacity:0}.app-footer-wrap.footer-above.looper-entering>.app-footer{animation:.5s .4s backwards footer-fade-in-top}@keyframes footer-fade-in-top{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.app-footer-wrap.footer-above.looper-leaving>.app-footer{opacity:0}.app-footer-wrap.looper-leaving:not(.footer-above)>.app-footer{animation:.5s .35s backwards footer-fade-in-bottom}@keyframes footer-fade-in-bottom{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.app-footer-wrap.footer-fading>.app-footer{opacity:0;transition:opacity .2s}.app-footer-wrap.footer-topbar{height:37px;display:block}.app-footer-wrap.footer-topbar>.app-footer{z-index:6;width:auto;max-width:none;margin:0;animation:.3s footer-appear;position:fixed;top:18px;left:50%;transform:translate(-50%)}.app-footer-wrap.footer-return-in>.app-footer{animation:.3s footer-appear}@keyframes footer-appear{0%{opacity:0}to{opacity:1}}.instructions-above{width:max-content;animation:.35s 50ms backwards footer-appear;position:absolute;bottom:calc(100% + 24px);left:50%;transform:translate(-50%)}.instructions-above.instr-fading{opacity:0;transition:opacity .2s}.instructions-above .instructions-panel{justify-content:center;margin-top:0;animation:none;position:static;transform:none}.app-footer{z-index:1;color:#fff;flex-direction:column;align-items:center;width:740px;max-width:calc(100vw - 40px);margin-top:20px;font-family:Geist Mono,monospace;font-size:13px;display:flex;position:relative}.app-footer-row{text-transform:var(--footer-transform,lowercase);white-space:nowrap;color:#ffffff80;justify-content:center;align-items:center;gap:14px;display:flex}.app-footer-row span{transition:color .15s}.footer-toggle{color:#ffffff80;font:inherit;text-transform:inherit;cursor:pointer;background:0 0;border:none;padding:0;text-decoration:none;transition:color .15s}.footer-toggle:hover{color:#fff}.instructions-panel{align-items:flex-start;gap:20px;margin-top:18px;animation:.25s ease-out instructions-fade-in;display:flex;position:absolute;top:100%;left:50%;transform:translate(-50%)}.app-footer-row{position:relative}@keyframes instructions-fade-in{0%{opacity:0;transform:translate(-50%)translateY(-4px)}to{opacity:1;transform:translate(-50%)translateY(0)}}.instr-group{flex-direction:column;align-items:stretch;gap:8px;display:flex}.instr-keys{justify-content:center;gap:5px;display:flex}.mac-key{color:#333;-webkit-user-select:none;user-select:none;background:linear-gradient(#d8d8d8 0%,#c2c2c2 100%);border:1px solid #8a8a8a;border-top-color:#9a9a9a;border-radius:4px;justify-content:center;align-items:center;min-width:26px;height:26px;padding:0 6px;font-family:Geist Mono,monospace;font-size:10px;display:flex;box-shadow:0 1px #0006,inset 0 1px #ffffff80}.mac-key.wide{justify-content:flex-start;min-width:48px;padding:0 8px}.mac-key-rot{line-height:1;display:inline-block}.instr-key-plus{color:#ffffff59;align-self:center;margin-top:-18px;font-family:Geist Mono,monospace;font-size:16px}.instr-label-row{align-items:center;gap:6px;display:flex}.instr-line{background:#fff3;flex:1;height:1px}.instr-label{color:#fff9;text-transform:lowercase;letter-spacing:.6px;white-space:nowrap;font-family:Geist Mono,monospace;font-size:9.5px}select{color:var(--c-ink);border:var(--bw-tile) solid var(--c-border);border-radius:var(--r-control);height:var(--control-h,37px);cursor:pointer;box-shadow:var(--sh-control);appearance:none;background:#fff url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l3 3 3-3' stroke='%23999' stroke-width='1.2' fill='none'/%3E%3C/svg%3E") right 10px center no-repeat;outline:none;padding:0 28px 0 12px;font-family:Geist Mono,monospace;font-size:12px}select:hover{border-color:var(--c-border-hover)}select:focus{border-color:#999}.bottom-row{gap:var(--gap-bottom);align-items:stretch;display:flex}@media (width<=640px){body{padding:16px 0 calc(20px + env(safe-area-inset-bottom));justify-content:flex-start}.app-card{border-radius:16px;gap:12px;width:100%;max-width:calc(100vw - 24px);padding:16px 14px}.bottom-row{flex-direction:column}.app-footer{width:100%;max-width:calc(100vw - 24px);margin-top:14px;font-size:11px}.app-footer-row{white-space:normal;flex-wrap:wrap;gap:10px}}.mini-laurie{width:300px;max-width:100%;height:auto;margin:0 auto;display:block}.mini-card{fill:#fff;stroke:#dbdbdb;stroke-width:1px}.mini-laurie-text{fill:#35353573;letter-spacing:.3px;font-family:Ubuntu,sans-serif;font-size:14px;font-weight:400}.mini-alpha{fill:#35353566;font-family:Georgia,serif;font-size:10px;font-style:italic}.mini-ctl-pill{fill:#fff;stroke:#dbdbdb;stroke-width:.8px}.mini-chord-box{fill:#fff;stroke:#dbdbdb;stroke-width:.8px;transition:fill .2s,stroke .2s}.mini-chord-box.playing{fill:#e4e7fb;stroke:#8b96ff}.mini-chord-dot{fill:#7ae093;transition:cx .25s}.mini-props-panel{fill:#f5f5f5;stroke:#dbdbdb;stroke-width:.8px}.mini-prop-pill{fill:#fff;stroke:#dbdbdb;stroke-width:.6px;transition:fill .25s,stroke .25s}.mini-prop-pill.active-type{fill:#cfffdf;stroke:#7ae093}.mini-prop-pill.active-inversion{fill:#d1f0ff;stroke:#44a8ff}.mini-prop-pill.active-secondary{fill:#f4daff;stroke:#e092ff}.mini-trackpad{fill:#fff;stroke:#dbdbdb;stroke-width:.8px}.mini-trackpad-grid{stroke:#0000000f;stroke-width:.5px}.mini-trackpad-dot{animation:7s ease-in-out infinite mini-trackpad-drift}.mini-trackpad-plus{stroke:#d05050;stroke-opacity:.85;stroke-width:1.2px;stroke-linecap:round}@keyframes mini-trackpad-drift{0%{transform:translate(-14px,-10px)}20%{transform:translate(12px,-14px)}40%{transform:translate(16px,4px)}60%{transform:translate(6px,14px)}80%{transform:translate(-16px,10px)}to{transform:translate(-14px,-10px)}}.mini-piano-bg{fill:#fafafa;stroke:#dbdbdb;stroke-width:.8px}.mini-white-key{fill:#fff;stroke:#0000001f;stroke-width:.5px;transition:fill .15s}.mini-white-key.highlighted{fill:#cdd0f4}.mini-black-key{fill:#353535}.dot-grid-canvas{pointer-events:none;z-index:0;width:100vw;height:100vh;position:fixed;inset:0}.auth-overlay{z-index:10000;-webkit-backdrop-filter:blur(10px)saturate(120%);background:#14141647;justify-content:center;align-items:center;animation:.2s ease-out auth-fade-in;display:flex;position:fixed;inset:0}.auth-overlay.auth-closing{animation:.2s ease-out forwards auth-fade-out}@keyframes auth-fade-in{0%{opacity:0}to{opacity:1}}@keyframes auth-fade-out{0%{opacity:1}to{opacity:0}}.auth-panel{color:#353535;background:#fff;border:1px solid #0000001f;border-radius:14px;width:380px;max-width:calc(100vw - 40px);padding:20px 24px 22px;font-family:Geist Mono,monospace;animation:.22s ease-out auth-panel-enter;box-shadow:0 4px 34px #0000002e}@keyframes auth-panel-enter{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.auth-header{justify-content:space-between;align-items:center;margin-bottom:18px;display:flex}.auth-title{letter-spacing:.5px;font-size:15px;font-weight:500}.auth-close{cursor:pointer;color:#00000080;background:0 0;border:1px solid #0000001f;border-radius:6px;justify-content:center;align-items:center;width:26px;height:26px;transition:background .15s,color .15s,border-color .15s;display:inline-flex}.auth-close:hover{color:#353535;background:#0000000a;border-color:#00000040}.auth-close svg{stroke:currentColor;stroke-width:1.4px;stroke-linecap:round}.auth-oauth{flex-direction:column;gap:8px;display:flex}.auth-oauth-btn{color:#353535;cursor:pointer;background:#fff;border:1px solid #00000024;border-radius:8px;justify-content:center;align-items:center;gap:8px;width:100%;padding:10px 12px;font-family:inherit;font-size:13px;transition:background .15s,border-color .15s;display:flex}.auth-google-g{flex:none;width:15px;height:15px}.auth-oauth-btn:hover{background:#0000000a;border-color:#00000040}.auth-divider{text-align:center;color:#00000059;letter-spacing:.8px;text-transform:uppercase;align-items:center;margin:16px 0;font-size:11px;display:flex}.auth-divider:before,.auth-divider:after{content:"";background:#0000001a;flex:1;height:1px}.auth-divider span{padding:0 10px}.auth-form{flex-direction:column;gap:12px;display:flex}.auth-field{flex-direction:column;gap:5px;display:flex}.auth-field span{color:#0006;letter-spacing:.8px;text-transform:uppercase;font-size:11px}.auth-field input{color:#353535;box-sizing:border-box;background:#fafafa;border:1px solid #00000024;border-radius:8px;width:100%;padding:9px 11px;font-family:inherit;font-size:13px}.auth-field input:focus{background:#fff;border-color:#0006;outline:none}.auth-error{color:#c0392b;font-size:12px;line-height:1.4}.auth-notice{color:#2d7a46;font-size:12px;line-height:1.4}.auth-submit{color:#fff;letter-spacing:.4px;cursor:pointer;background:#353535;border:none;border-radius:8px;width:100%;margin-top:2px;padding:11px 12px;font-family:inherit;font-size:13px;font-weight:500;transition:background .15s}.auth-submit:hover:not(:disabled){background:#000}.auth-submit:disabled{opacity:.5;cursor:default}.auth-switch{text-align:center;color:#00000080;margin-top:16px;font-size:12px}.auth-switch button{color:#353535;cursor:pointer;background:0 0;border:none;padding:0;font-family:inherit;font-size:12px;text-decoration:underline}