@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-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;--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{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}}.instrument-anchor{position:relative}.instrument-trigger{width:160px;height:var(--control-h,37px);color:var(--c-ink);border:var(--bw-tile) solid var(--c-border);border-radius:var(--r-control);cursor:pointer;box-shadow:var(--sh-control);background:#fff;outline:none;justify-content:space-between;align-items:center;gap:8px;padding:0 12px;font-family:Geist Mono,monospace;font-size:12px;transition:border-color .1s;display:flex}.instrument-trigger:hover{border-color:#bbb}.instrument-trigger.open{border-color:#999}.instrument-trigger-label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.instrument-trigger-caret{flex-shrink:0;transition:transform .15s}.instrument-trigger.open .instrument-trigger-caret{transform:rotate(180deg)}.instrument-panel{z-index:10002;color:#353535;background:#fff;border:1.4px solid #dbdbdb;border-radius:10px;gap:0;width:760px;max-width:min(94vw,820px);max-height:min(72vh,520px);font-family:Geist Mono,monospace;display:flex;position:fixed;overflow:hidden;box-shadow:0 10px 32px #00000024}.instrument-panel-main{scrollbar-width:thin;scrollbar-color:#cfcfcf transparent;flex-direction:column;flex:auto;gap:12px;min-width:0;max-height:min(72vh,520px);padding:14px;display:flex;overflow-y:auto}.instrument-panel-main::-webkit-scrollbar{width:8px}.instrument-panel-main::-webkit-scrollbar-thumb{background:#d4d4d4;border:2px solid #fff;border-radius:4px}.instrument-panel-main::-webkit-scrollbar-thumb:hover{background:#bcbcbc}.instrument-panel-side{background:#fafafa;border-left:1.4px solid #ededed;flex-direction:column;flex:0 0 300px;gap:12px;min-width:0;max-height:min(72vh,520px);padding:16px;display:flex;overflow-y:auto}.ip-group-label{font-size:var(--label-size,10px);letter-spacing:calc(.3px * var(--label-tracking,1));color:#353535;margin:0 0 6px;font-weight:400}.ip-group+.ip-group{margin-top:12px}.ip-chips{grid-template-columns:1fr 1fr;gap:6px;display:grid}.ip-chip{z-index:1;color:#353535;cursor:pointer;text-align:left;background:#fff;border:1.4px solid #dbdbdb;border-radius:7px;justify-content:space-between;align-items:center;gap:8px;padding:7px 11px;font-family:Geist Mono,monospace;font-size:12px;transition:border-color .1s,background .1s,transform 60ms,box-shadow 60ms;display:flex;position:relative;box-shadow:inset 0 -2px #e4e4ea,0 1.5px #0000001f}.ip-chip-label{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.ip-chip-check{color:var(--c-play,#8b96ff);flex-shrink:0;display:block}.ip-chip:hover{background:#f6f6f6;border-color:#bbb}.ip-chip.selected{z-index:0;border-color:var(--c-play,#8b96ff);color:#353535;background:#fff;transform:translateY(2px);box-shadow:inset 0 -1px #e4e4ea,0 1px #0000001a,0 4px 10px 1px #8b96ff80}.ip-side-header{justify-content:space-between;align-items:center;gap:8px;display:flex}.ip-side-title{letter-spacing:.3px;color:#353535;font-size:11px;font-weight:400}.ip-help-btn{color:#353535;cursor:pointer;background:#fff;border:1.4px solid #dbdbdb;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:20px;height:20px;padding:0;font-family:Geist Mono,monospace;font-size:11px;line-height:1;transition:border-color .1s,background .1s;display:flex}.ip-help-btn:hover{background:#f0f0f0;border-color:#bbb}.ip-help-btn.active{color:#fff;background:#353535;border-color:#353535}.ip-daw-list{flex-direction:column;gap:6px;display:flex}.ip-daw-row{z-index:1;color:#353535;cursor:pointer;text-align:left;background:#fff;border:1.4px solid #dbdbdb;border-radius:7px;justify-content:space-between;align-items:center;gap:8px;width:100%;padding:8px 10px;font-family:Geist Mono,monospace;font-size:12px;transition:border-color .1s,background .1s,transform 60ms,box-shadow 60ms;display:flex;position:relative;box-shadow:inset 0 -2px #e4e4ea,0 1.5px #0000001f}.ip-daw-row:hover{background:#fff;border-color:#bbb}.ip-daw-row.connected{z-index:0;border-color:var(--c-play,#8b96ff);color:#353535;background:#fff;transform:translateY(2px);box-shadow:inset 0 -1px #e4e4ea,0 1px #0000001a,0 4px 10px 1px #8b96ff80}.ip-daw-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.ip-lock-badge{letter-spacing:.6px;text-transform:uppercase;color:#fff;background:#3a3a3e;border-radius:5px;flex-shrink:0;align-items:center;gap:5px;padding:4px 8px;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:10px;font-weight:700;display:inline-flex}.ip-lock-spin{text-align:center;width:1em;font-size:10px;line-height:1;display:inline-block}.ip-empty{color:#35353599;font-size:11px;line-height:1.45}.ip-empty-link{color:#353535;cursor:pointer;background:0 0;border:none;margin-top:4px;padding:0;font-family:Geist Mono,monospace;font-size:11px;text-decoration:underline;display:inline}.ip-instructions{color:#353535d9;background:#fff;border:1.4px solid #ededed;border-radius:8px;padding:10px 12px;font-size:10.5px;line-height:1.5}.ip-instructions ol{flex-direction:column;gap:6px;margin:0;padding-left:16px;display:flex}.ip-instructions code{background:#f2f2f2;border-radius:3px;padding:0 3px;font-family:Geist Mono,monospace}.ip-instructions-note{color:#3535358c;margin-top:8px;font-style:italic}@media (width<=860px){.instrument-panel{width:min(94vw,620px)}.instrument-panel-side{flex-basis:260px}}@media (width<=640px){.instrument-trigger{width:100%}.instrument-panel{flex-direction:column;width:auto;max-width:none;max-height:min(82vh,620px);position:fixed;inset:auto 12px 12px;overflow-y:auto}.instrument-panel-main,.instrument-panel-side{flex:none;max-height:none;overflow-y:visible}.instrument-panel-side{border-top:1.4px solid #ededed;border-left:none}}@media (width<=420px){.ip-chips{grid-template-columns:1fr}}.controls{justify-content:space-between;align-items:flex-end;gap:16px;display:flex}.app-title{color:#353535;white-space:nowrap;opacity:.5;flex-shrink:0;font-family:Ubuntu,sans-serif;font-size:24px;font-style:normal;font-weight:400}.app-subtitle{color:#353535;letter-spacing:-.3px;margin-left:-2px;font-family:Georgia,Times New Roman,serif;font-size:12px;font-style:italic;font-weight:400}.controls-right{align-items:flex-end;gap:12px;min-width:0;display:flex}.control-group{flex-direction:column;gap:4px;display:flex}.control-group-account{justify-content:flex-end}.control-group label{font-size:var(--label-size,9px);text-transform:var(--label-transform,uppercase);letter-spacing:calc(1.3px * var(--label-tracking,1));color:#35353566;font-family:Geist Mono,monospace;font-weight:400}.octave-controls{border-radius:var(--r-control);box-shadow:var(--sh-oct);align-items:center;gap:0;display:flex}.octave-controls button{width:32px;height:var(--control-h,37px);background:var(--surface-btn);color:var(--c-ink);border:var(--bw-tile) solid var(--c-border);cursor:pointer;justify-content:center;align-items:center;padding:0;font-family:Geist Mono,monospace;font-size:14px;transition:background .1s;display:flex}.octave-controls button:first-child{border-radius:var(--r-control) 0 0 var(--r-control)}.octave-controls button:last-child{border-radius:0 var(--r-control) var(--r-control) 0}.octave-controls button:hover{background:#f0f0f0}.octave-controls button:active{box-shadow:var(--sh-oct-active)}.octave-display{min-width:36px;height:var(--control-h,37px);background:var(--surface-btn);border-top:var(--bw-tile) solid var(--c-border);border-bottom:var(--bw-tile) solid var(--c-border);color:var(--c-ink);justify-content:center;align-items:center;font-size:12px;font-weight:400;display:flex}.toggle-wrap{align-items:center;height:37px;display:flex}.toggle-label{width:62px;height:var(--control-h,37px);cursor:pointer;display:inline-block;position:relative}.toggle-label input{display:none}.toggle-track{background:var(--toggle-bg);border:var(--bw-tile) solid var(--c-border);border-radius:var(--r-control);box-shadow:var(--sh-control);transition:background .2s;position:absolute;inset:0}.toggle-track:after{content:"";border:1px solid var(--c-border);border-radius:calc(var(--r-control) - 2px);background:#fff;width:27px;height:27px;transition:transform .2s,background .2s;position:absolute;top:calc(50% - 14.5px);left:4px}.toggle-label input:checked+.toggle-track:after{transform:translate(24px)}@media (width<=640px){.controls{flex-direction:column;align-items:stretch;gap:10px}.app-title{font-size:22px}.controls-right{flex-wrap:wrap;gap:12px 10px}.controls-right .control-group{flex:auto}.controls-right .control-group:has(.toggle-wrap){flex:none}.controls-right .control-group[data-tutorial=instrument]{flex:auto}.controls-right .control-group[data-tutorial=instrument] .instrument-anchor,.controls-right .control-group select,.octave-controls{width:100%}.octave-controls button{flex:1}.octave-display{flex:1;min-width:0}}.chords-row{gap:var(--gap-grid);display:flex}.chord-box{aspect-ratio:1;background:var(--surface-tile);border:var(--bw-tile) solid var(--c-border);border-radius:var(--r-tile);box-shadow:var(--sh-tile);outline-offset:calc(-1 * var(--bw-tile) - var(--tile-sel-ring-w));-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none;cursor:pointer;padding:var(--pad-tile);outline:0 solid #0000;flex:1;grid-template-rows:auto 1fr auto;place-items:center;transition:all 80ms,border-color .16s,outline-color .16s,outline-width .16s;display:grid;position:relative;overflow:hidden}.chord-box:hover{border-color:var(--c-border-hover)}.chord-box.selected{border-color:var(--tile-selected-border);outline-width:calc(var(--tile-sel-ring-w) + .6px);outline-color:var(--tile-selected-border);background:var(--tile-selected-bg)}.chord-box.playing{background:var(--c-play-bg);border-color:var(--c-play);outline-color:var(--c-play);box-shadow:var(--sh-tile-active);transform:translateY(var(--tile-press-y))}.chord-degree{font-size:calc(var(--label-size,10px) - 1px);color:#35353566;letter-spacing:calc(1.3px * var(--label-tracking,1));place-self:start center;padding-top:4px;font-family:Geist Mono,monospace;font-weight:400}.chord-name{color:var(--c-ink);text-align:center;white-space:nowrap;font-family:Geist Mono,monospace;font-weight:700;line-height:1.1}.chord-box.playing .chord-name{color:var(--c-play-ink)}.chord-dots-area{justify-content:center;align-self:end;align-items:center;height:10px;padding-bottom:2px;display:flex}.chord-dots{justify-content:center;display:flex}.chord-dot{opacity:0;border-radius:50%;width:0;height:6px;margin:0;transition:width .15s,opacity .15s,margin .15s}.chord-dot.dot-visible{opacity:1;width:6px;margin:0 2px}.dot-type{background:var(--c-type)}.dot-secondary{background:var(--c-secondary)}.dot-inversion{background:var(--c-inversion)}@media (width<=640px){.chords-row{grid-template-columns:repeat(12,1fr);gap:7px;display:grid}.chord-box{aspect-ratio:auto;border-radius:8px;height:76px;padding:5px 4px}.chord-box:nth-child(-n+3){grid-column:span 4}.chord-box:nth-child(n+4){grid-column:span 3}.chord-degree{font-size:calc(var(--label-size,10px) - 2px);letter-spacing:calc(.5px * var(--label-tracking,1));padding-top:3px}}.props-panel{border:1px solid var(--c-border);border-radius:var(--r-panel);background:var(--surface-panel);padding:var(--pad-panel-top) var(--pad-panel-x) var(--pad-panel-bottom);opacity:1}.props-body{justify-content:space-between;align-items:flex-start;display:flex}.props-section{gap:var(--gap-btn);flex-direction:column;display:flex}.props-section-header{align-items:center;gap:8px;display:flex}.props-line{background:#35353526;flex:1;height:1px}.props-section-label{font-size:var(--label-size,9.5px);text-transform:var(--label-transform,uppercase);letter-spacing:calc(1.3px * var(--label-tracking,1));color:#35353580;white-space:nowrap;font-family:Geist Mono,monospace;font-weight:400}.props-options{gap:var(--gap-btn);display:flex}.prop-btn{background:var(--surface-btn);border:1px solid var(--c-border);border-radius:var(--r-btn);width:34px;height:34px;color:var(--c-ink);cursor:pointer;text-align:center;box-shadow:var(--sh-btn);justify-content:center;align-items:center;padding:0;font-family:Geist Mono,monospace;font-size:9.5px;font-weight:400;transition:all 80ms;display:flex;transform:translateY(0)}.prop-btn:hover{border-color:var(--c-border-hover);background:var(--surface-btn-hover)}.prop-btn:active{transform:translateY(var(--btn-press-y));box-shadow:var(--sh-btn-active)}.prop-btn.active-type,.prop-btn.active-secondary,.prop-btn.active-inversion{transform:translateY(var(--btn-sel-y));box-shadow:var(--sh-btn-sel)}.prop-btn.active-type{background:var(--c-type-bg);border-color:var(--c-type);color:var(--c-ink)}.prop-btn.active-secondary{background:var(--c-secondary-bg);border-color:var(--c-secondary);color:var(--c-ink)}.prop-btn.active-inversion{background:var(--c-inversion-bg);border-color:var(--c-inversion);color:var(--c-ink)}.prop-btn:disabled{opacity:.25;cursor:default}@media (width<=640px){.props-panel{border-radius:14px;padding:10px 14px 14px}.props-body{flex-direction:column;align-items:stretch;gap:12px}.props-options{gap:6px}.prop-btn{flex:1 1 0;width:auto;min-width:0;height:38px}}.piano-wrap{padding:var(--pad-piano-y) var(--pad-piano-x);background:var(--surface-piano);border:1px solid var(--c-border);border-radius:var(--r-pad);flex:1;justify-content:center;align-items:center;display:flex;overflow:hidden}.piano-mask{margin:-14px -8px;padding:14px 8px;-webkit-mask:linear-gradient(90deg,#0000 0,#000 8px calc(100% - 8px),#0000 100%) no-repeat;mask:linear-gradient(90deg,#0000 0,#000 8px calc(100% - 8px),#0000 100%) no-repeat}.piano{height:88px;position:relative}.piano-slide{height:100%;display:flex;position:absolute;top:0}.piano-slide.sliding{animation:.24s cubic-bezier(.22,.9,.3,1) forwards piano-slide}@keyframes piano-slide{0%{transform:translateX(var(--slide-from))}to{transform:translate(0)}}.key-in{animation:80ms ease-out backwards key-fade-in}.key-out{animation:80ms ease-out forwards key-fade-out}@keyframes key-fade-in{0%{opacity:0}}@keyframes key-fade-out{to{opacity:0}}.white-key{border-radius:var(--r-key);width:22px;height:88px;box-shadow:var(--sh-key);z-index:1;margin-right:var(--gap-key);background:#fff;transition:background 60ms,box-shadow 60ms,transform 60ms;position:relative}.white-key.highlighted{background:var(--key-hi-bg);box-shadow:var(--sh-key-active);transform:translateY(var(--key-press-y))}.black-key{background:var(--c-ink);border-radius:var(--r-key);width:15px;height:50px;box-shadow:var(--sh-key-black);z-index:2;transition:background 60ms,box-shadow 60ms,transform 60ms;position:absolute;top:2px}.black-key.highlighted{background:var(--key-hi-bg-black);box-shadow:var(--sh-key-black-active);transform:translateY(var(--key-press-y))}.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}.tutorial-overlay{z-index:10000;pointer-events:none;position:fixed;inset:0}.tutorial-overlay.tutorial-closing{pointer-events:none!important}.tutorial-mask-svg{pointer-events:none;width:100%;height:100%;transition:opacity .2s;position:fixed;inset:0}.tutorial-closing .tutorial-mask-svg{opacity:0}.tutorial-mask-svg rect{transition:x .3s,y .3s,width .3s,height .3s}.tutorial-spotlight{pointer-events:none;border:2px solid #ffffff40;border-radius:10px;transition:left .3s,top .3s,width .3s,height .3s,opacity .2s;position:fixed}.tutorial-closing .tutorial-spotlight{opacity:0}.tutorial-top-bar{pointer-events:auto;z-index:10001;justify-content:space-between;align-items:baseline;width:740px;max-width:calc(100vw - 40px);padding:0 12px;transition:opacity .2s;display:flex;position:fixed;left:50%;transform:translate(-50%)}.tutorial-closing .tutorial-top-bar{opacity:0}.tutorial-top-title{color:#fff;letter-spacing:.5px;font-family:Ubuntu,sans-serif;font-size:26px;font-weight:400}.tutorial-top-subtitle{color:#fff9;font-size:16px;font-weight:300}.tutorial-top-alpha{font-family:Georgia,serif;font-style:italic}.tutorial-exit-btn{color:#ffffff80;cursor:pointer;background:0 0;border:none;padding:0;font-family:Geist Mono,monospace;font-size:13px;transition:color .15s}.tutorial-exit-btn:hover{color:#fff}.tutorial-panel{color:#353535;pointer-events:auto;background:#fff;border:1px solid #0000001f;border-radius:14px;width:740px;max-width:calc(100vw - 40px);padding:24px 28px;font-family:Geist Mono,monospace;transition:opacity .2s;animation:.25s ease-out tutorial-enter;position:fixed;bottom:60px;left:50%;transform:translate(-50%);box-shadow:0 4px 34px #00000026}.tutorial-closing .tutorial-panel{opacity:0}@keyframes tutorial-enter{0%{opacity:0;transform:translate(-50%)translateY(8px)}to{opacity:1;transform:translate(-50%)translateY(0)}}.tutorial-header{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.tutorial-title{letter-spacing:.5px;font-size:15px;font-weight:500}.tutorial-counter{color:#00000059;font-size:11px}.tutorial-desc{color:#555;margin-bottom:16px;font-size:13px;line-height:1.5}.tutorial-keys{justify-content:center;gap:20px;margin-bottom:18px;display:flex}.tutorial-instr-line{display:none}.tutorial-instr-label{color:#35353566;letter-spacing:calc(.6px * var(--label-tracking,1));text-transform:none;font-size:12px}.tutorial-keys .mac-key,.instructions-panel .mac-key{color:#353535;background:#fff;border:1.5px solid #454545;border-radius:8px;min-width:38px;height:38px;padding:0 9px;font-size:13px;transition:transform 60ms,box-shadow 60ms;box-shadow:inset 0 -3px #e4e4ea,0 2px #00000038}.tutorial-keys .mac-key.wide,.instructions-panel .mac-key.wide{justify-content:center;min-width:72px}.tutorial-keys .mac-key.mac-key-indicator,.instructions-panel .mac-key.mac-key-indicator{min-width:30px;height:24px;box-shadow:none;color:#0000004d;background:0 0;border-color:#00000026;font-size:11px}.tutorial-keys .mac-key.pressed,.instructions-panel .mac-key.pressed{color:#353535;border-color:var(--key-press-border,var(--c-play,#8b96ff));box-shadow:inset 0 -2px 0 #e4e4ea, 0 1px 0 #0000002e, 0 6px 16px 2px var(--key-press-glow,#8b96ff8c);background:#fff;transform:translateY(3px)}.tutorial-keys .mac-key.pressed-play,.instructions-panel .mac-key.pressed-play{--key-press-border:var(--c-play,#8b96ff);--key-press-glow:#8b96ff99}.tutorial-keys .mac-key.pressed-green,.instructions-panel .mac-key.pressed-green{--key-press-border:#4ab85e;--key-press-glow:#5cc87099}.tutorial-keys .mac-key.pressed-blue,.instructions-panel .mac-key.pressed-blue{--key-press-border:#44a8ff;--key-press-glow:#44a8ff8c}.tutorial-keys .mac-key.pressed-purple,.instructions-panel .mac-key.pressed-purple{--key-press-border:#e092ff;--key-press-glow:#e092ff99}.instr-keys-indicator{margin-bottom:4px}.mac-key.mac-key-indicator{color:#00000059;box-shadow:none;background:0 0;border-color:#0000001f;min-width:26px;height:20px;font-size:10px}.mac-key.pressed,.mac-key.pressed-green{color:#1a3d1f;background:linear-gradient(#7ae093 0%,#5cc870 100%);border-color:#4ab85e}.mac-key.pressed-blue{color:#1a4a6e;background:linear-gradient(#d1f0ff 0%,#a0d8f7 100%);border-color:#44a8ff}.mac-key.pressed-purple{color:#4a1a5e;background:linear-gradient(#f4daff 0%,#e4b8f7 100%);border-color:#e092ff}.mac-key.pressed-play{border-color:var(--c-play,#8b96ff);color:#0b188e;background:linear-gradient(#e4e7fb 0%,#b7bfff 100%)}.tutorial-key-chip{vertical-align:1px;background:#fafafa;border:1px solid #00000040;border-bottom-width:2px;border-radius:4px;padding:0 5px;font-family:Geist Mono,monospace;font-size:11px;line-height:16px;display:inline-block}.tutorial-cycle-num{animation:.7s ease-in-out tutorial-cycle-fade;display:inline-block}@keyframes tutorial-cycle-fade{0%{opacity:0}40%{opacity:1}to{opacity:1}}.tutorial-key-plus{color:#00000073;align-self:center;margin-top:-18px;font-family:Geist Mono,monospace;font-size:30px;font-weight:500}.tutorial-instrument-section{flex-direction:column;align-items:center;gap:16px;margin-bottom:18px;display:flex}.tutorial-daw-logos{justify-content:center;align-items:center;gap:16px;display:flex}.tutorial-daw-logo{object-fit:cover;border-radius:10px;width:56px;height:56px;transition:opacity .3s}.tutorial-midi-status{flex-direction:column;align-items:center;gap:8px;width:100%;display:flex}.tutorial-midi-searching{align-items:center;gap:10px;display:flex}.tutorial-midi-pulse{flex-shrink:0;width:10px;height:10px;position:relative}.tutorial-midi-pulse:before{content:"";background:#e04040;border-radius:50%;position:absolute;inset:0}.tutorial-midi-pulse:after{content:"";border:2px solid #e04040;border-radius:50%;animation:1.5s ease-out infinite midi-ripple;position:absolute;inset:-4px}@keyframes midi-ripple{0%{opacity:.8;transform:scale(1)}to{opacity:0;transform:scale(2.2)}}.tutorial-midi-searching-text{color:#888;font-size:12px}.tutorial-midi-found-row{flex-direction:column;align-items:center;gap:10px;display:flex}.tutorial-midi-found-text{color:#3a7a3a;align-items:center;gap:8px;font-size:13px;font-weight:500;display:flex}.tutorial-midi-check{flex-shrink:0;width:16px;height:16px}.tutorial-nav{justify-content:space-between;display:flex}.tutorial-nav-btn{color:#353535;cursor:pointer;background:0 0;border:1px solid #00000026;border-radius:7px;padding:8px 22px;font-family:Geist Mono,monospace;font-size:12px;transition:background .15s,border-color .15s}.tutorial-nav-btn:hover:not(:disabled){background:#0000000a;border-color:#00000040}.tutorial-nav-btn:disabled{opacity:.25;cursor:default}.tutorial-fullscreen-dim{pointer-events:auto;background:#0000008c;transition:opacity .28s,background .28s,-webkit-backdrop-filter .28s,backdrop-filter .28s;position:fixed;inset:0}.tutorial-fullscreen-blur{-webkit-backdrop-filter:blur(10px)saturate(120%);background:#14141647}.tutorial-closing .tutorial-fullscreen-dim,.welcome-exiting .tutorial-fullscreen-dim{opacity:0;-webkit-backdrop-filter:blur()}.welcome-exiting .tutorial-panel,.welcome-exiting .tutorial-top-bar{opacity:0;transition:opacity .2s}.tutorial-panel-welcome{text-align:center;width:440px;padding:22px 28px;animation:.3s ease-out tutorial-welcome-enter;top:50%;bottom:auto;transform:translate(-50%,-50%)}.tutorial-panel-over-grid{box-shadow:none;background:0 0;border:none}.tutorial-panel-over-grid .tutorial-welcome-title{color:#fff;margin-bottom:12px;font-size:26px}.tutorial-panel-over-grid .tutorial-welcome-subtitle{color:#ffffff8c;max-width:440px;margin-bottom:28px;font-size:15.5px}.tutorial-panel-over-grid .tutorial-welcome-primary{color:#353535;background:#fff;border-color:#ffffff80;min-width:180px;padding:12px 32px;font-size:14px}.tutorial-panel-over-grid .tutorial-welcome-primary:hover{background:#ffffffeb;border-color:#ffffffb3}.tutorial-panel-over-grid .tutorial-welcome-skip{color:#fff6;padding:6px 10px;font-size:13px}.tutorial-panel-over-grid .tutorial-welcome-skip:hover{color:#fffc}.tutorial-welcome-mini{justify-content:center;margin:0 auto 16px;display:flex}@keyframes tutorial-welcome-enter{0%{opacity:0;transform:translate(-50%,calc(8px - 50%))}to{opacity:1;transform:translate(-50%,-50%)}}.tutorial-welcome-title{letter-spacing:.5px;color:#353535;margin:0 0 8px;font-size:20px;font-weight:500}.tutorial-welcome-subtitle{color:#777;max-width:380px;margin:0 auto 22px;font-size:13.5px;line-height:1.55}.tutorial-welcome-actions{flex-direction:column;align-items:center;gap:8px;display:flex}.tutorial-welcome-primary{min-width:150px}.tutorial-welcome-skip{color:#0006;cursor:pointer;background:0 0;border:none;padding:4px 10px;font-family:Geist Mono,monospace;font-size:12px;transition:color .15s}.tutorial-welcome-skip:hover{color:#000000b3}.tutorial-daw-checkbox{color:#353535;cursor:pointer;background:#fff;border:1.5px solid #454545;border-radius:8px;align-items:center;gap:10px;padding:10px 18px;font-family:Geist Mono,monospace;font-size:12px;transition:transform 60ms,box-shadow 60ms,border-color .15s;display:inline-flex;box-shadow:inset 0 -3px #e4e4ea,0 2px #00000038}.tutorial-daw-checkbox:hover{border-color:var(--c-play,#8b96ff)}.tutorial-daw-checkbox.checked{border-color:var(--c-play,#8b96ff);transform:translateY(3px);box-shadow:inset 0 -2px #e4e4ea,0 1px #0000002e,0 6px 16px 2px #8b96ff8c}.tutorial-daw-checkbox-mark{border:1.5px solid #0000004d;border-radius:3px;flex-shrink:0;justify-content:center;align-items:center;width:14px;height:14px;transition:background .15s,border-color .15s;display:inline-flex}.tutorial-daw-checkbox.checked .tutorial-daw-checkbox-mark{background:var(--c-play,#8b96ff);border-color:var(--c-play,#8b96ff)}.tutorial-daw-checkbox-mark svg{stroke:#fff;opacity:0;width:10px;height:10px;transition:opacity .15s}.tutorial-daw-checkbox.checked .tutorial-daw-checkbox-mark svg{opacity:1}@media (width<=640px){.tutorial-top-bar{justify-content:flex-end;padding:0 6px;top:calc(10px + env(safe-area-inset-top))!important}.tutorial-top-title{display:none}.tutorial-exit-btn{padding:6px 8px;font-size:12px}.tutorial-panel{bottom:calc(10px + env(safe-area-inset-bottom));max-width:calc(100vw - 24px);padding:16px 18px}.tutorial-desc{margin-bottom:14px;font-size:12px}.tutorial-nav-btn{padding:10px 22px}.tutorial-panel-welcome{padding:18px 20px;bottom:auto}}.tutorial-pro-teaser{color:#353535;cursor:pointer;background:0 0;border:1px dashed #00000040;border-radius:7px;align-items:center;gap:10px;padding:9px 18px;font-family:Geist Mono,monospace;font-size:12px;transition:border-color .15s,background .15s;display:inline-flex}.tutorial-pro-teaser:hover{background:#00000008;border-color:#00000080}.tutorial-pro-teaser-lock{letter-spacing:.6px;text-transform:uppercase;color:#fff;white-space:nowrap;background:#3a3a3e;border-radius:5px;align-items:center;gap:5px;padding:4px 8px;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:10px;font-weight:700;display:inline-flex}.tutorial-pro-teaser-spin{text-align:center;width:1em;font-size:10px;line-height:1;display:inline-block}.instructions-panel .mac-key{border-width:1.2px;border-radius:6px;min-width:26px;height:26px;padding:0 6px;font-size:10px;box-shadow:inset 0 -2px #e4e4ea,0 1.5px #00000038}.instructions-panel .mac-key.wide{min-width:48px}.instructions-panel .mac-key.pressed{box-shadow:inset 0 -1px 0 #e4e4ea, 0 1px 0 #0000002e, 0 4px 10px 1px var(--key-press-glow,#8b96ff8c);transform:translateY(2px)}.pro-tutorial-backdrop{background:#0000008c;transition:opacity .2s;position:fixed;inset:0}.tutorial-closing .pro-tutorial-backdrop{opacity:0}.pro-tutorial .tutorial-panel-welcome{pointer-events:auto}.pro-strum-panel{width:500px;animation:none;transform:translate(calc(120px - 50%))}.pro-strum-checks{justify-content:center;gap:18px;margin:4px 0 18px;display:flex}.pro-strum-check{color:#3535358c;border:1px solid #00000026;border-radius:7px;align-items:center;gap:10px;padding:9px 18px;font-size:12.5px;transition:border-color .2s,color .2s;display:inline-flex}.pro-strum-check.done{color:#3a7a3a;border-color:#3a7a3a80}.pro-strum-check-mark{border:1.5px solid #00000040;border-radius:4px;justify-content:center;align-items:center;width:15px;height:15px;transition:background .2s,border-color .2s;display:inline-flex}.pro-strum-check-mark svg{stroke:#fff;opacity:0;width:9px;height:9px;transition:opacity .15s}.pro-strum-check.done .pro-strum-check-mark{background:#3a7a3a;border-color:#3a7a3a}.pro-strum-check.done .pro-strum-check-mark svg{opacity:1}.tutorial-nav-solo{justify-content:flex-end}.trackpad-control{background:var(--surface-tile);border:1px solid var(--c-border);border-radius:var(--r-pad);flex-direction:column;width:160px;min-width:160px;display:flex;position:relative}.trackpad-grid-wrap{border-radius:calc(var(--r-pad) - 1px) calc(var(--r-pad) - 1px) 0 0;flex:1;position:relative;overflow:hidden}.trackpad-canvas{cursor:default;touch-action:none;width:100%;height:100%;display:block}.trackpad-axis-y{color:#35353580;letter-spacing:.5px;pointer-events:none;font-family:Geist Mono,monospace;font-size:9px;position:absolute;top:50%;left:11px;transform:translate(-50%,-50%)rotate(-90deg)}.trackpad-axis-x{color:#35353580;letter-spacing:.5px;pointer-events:none;font-family:Geist Mono,monospace;font-size:9px;position:absolute;bottom:4px;left:50%;transform:translate(-50%)}.strum-help{color:#fff;text-align:center;opacity:0;pointer-events:none;background:#9a9a9a;border:none;border-radius:50%;width:16px;height:16px;padding:0;font-family:Geist Mono,monospace;font-size:10px;line-height:16px;transition:opacity .25s,background .25s;position:absolute;bottom:8px;right:8px}.trackpad-grid-wrap:hover .strum-help{opacity:.5;pointer-events:auto;cursor:pointer}.strum-help:hover{opacity:.7;background:#7f7f7f}.strum-help.strum-help-hidden,.trackpad-grid-wrap:hover .strum-help.strum-help-hidden{opacity:0;pointer-events:none}.trackpad-lock-hint{color:#0006;pointer-events:none;white-space:nowrap;justify-content:center;align-items:center;gap:6px;font-family:Geist Mono,monospace;font-size:10px;display:flex;position:absolute;top:calc(100% + 8px);left:0;right:0}.trackpad-lock-key{color:#0000008c;letter-spacing:.3px;background:#fff;border:1px solid #0003;border-bottom-width:2px;border-radius:3px;justify-content:center;align-items:center;min-width:22px;height:16px;padding:0 5px;font-size:9px;display:inline-flex}@media (width<=640px){.trackpad-control{width:100%;min-width:0;height:128px}.trackpad-grid-wrap{border-radius:9px}}.settings-overlay{z-index:10000;-webkit-backdrop-filter:blur(10px)saturate(120%);background:#14141647;justify-content:center;align-items:center;animation:.2s ease-out settings-fade-in;display:flex;position:fixed;inset:0}.settings-overlay.settings-closing{animation:.2s ease-out forwards settings-fade-out}@keyframes settings-fade-in{0%{opacity:0;-webkit-backdrop-filter:blur()}to{opacity:1}}@keyframes settings-fade-out{0%{opacity:1}to{opacity:0}}.settings-panel{color:#353535;background:#fff;border:1px solid #0000001f;border-radius:14px;width:520px;max-width:calc(100vw - 40px);padding:20px 24px 22px;font-family:Geist Mono,monospace;animation:.22s ease-out settings-panel-enter;box-shadow:0 4px 34px #0000002e}@keyframes settings-panel-enter{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.settings-header{justify-content:space-between;align-items:center;margin-bottom:18px;display:flex}.settings-title{letter-spacing:.5px;font-size:15px;font-weight:500}.settings-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}.settings-close:hover{color:#353535;background:#0000000a;border-color:#00000040}.settings-close svg{stroke:currentColor;stroke-width:1.4px;stroke-linecap:round}.settings-section-label{font-size:var(--label-size,11px);color:#0006;letter-spacing:calc(.8px * var(--label-tracking,1));text-transform:var(--label-transform,uppercase);margin-bottom:6px}.settings-section-desc{color:#888;margin-bottom:12px;font-size:12px;line-height:1.5}.settings-list{background:#fafafa;border:1px solid #00000014;border-radius:10px;flex-direction:column;display:flex;overflow:hidden}.settings-list-group{flex-direction:column;display:flex}.settings-list-group+.settings-list-group{border-top:1px solid #0000000f}.settings-row{text-align:left;width:100%;color:inherit;cursor:pointer;background:0 0;border:none;align-items:center;gap:12px;padding:10px 12px;font-family:inherit;transition:background .12s;display:flex}.settings-row:hover{background:#00000008}.settings-row-active{background:#f3f4ff}.settings-row-active:hover{background:#edefff}.settings-row-preview{border-radius:6px;flex:none;justify-content:center;align-items:center;width:72px;height:48px;display:flex;overflow:hidden}.settings-row-preview .pv-svg{width:100%;height:100%;display:block}.settings-row-body{flex-direction:column;flex:auto;gap:2px;min-width:0;display:flex}.settings-row-label{letter-spacing:.4px;color:#353535;align-items:center;gap:8px;font-size:12px;font-weight:500;display:flex}.settings-row-locked .settings-row-preview,.settings-row-locked .settings-row-desc{opacity:.55}.settings-row-desc{color:#888;font-size:11px;line-height:1.4}.settings-row-check{width:16px;height:16px;color:var(--c-play,#8b96ff);flex:none;justify-content:center;align-items:center;display:flex}.settings-check-icon{display:block}.pv-svg{overflow:visible}.pv-frame{fill:#fff;stroke:#00000014;stroke-width:1px}.pv-dot-hero{fill:#dc5050}.pv-plus{stroke:#dc5050;stroke-width:1.6px;stroke-linecap:round}.pv-track{stroke:#0000001a;stroke-width:1px;stroke-linecap:round}.pv-grid-dot{fill:#dbdbdb}.pv-xhair{stroke:#dc5050;stroke-width:.8px;stroke-linecap:round}.pv-arp-bar{fill:#0000002e;transition:fill .1s,y .1s,height .1s}.pv-arp-bar-on{fill:var(--c-play,#8b96ff)}.footer-settings-cog{color:#ffffff80;cursor:pointer;font:inherit;text-transform:inherit;background:0 0;border:none;justify-content:center;align-items:center;gap:8px;padding:0;transition:color .15s;display:inline-flex}.footer-settings-cog:hover{color:#fff}.footer-settings-cog:hover svg{transform:rotate(30deg)}.footer-settings-cog svg{stroke:currentColor;fill:none;stroke-width:1.4px;stroke-linecap:round;stroke-linejoin:round;width:14px;height:14px;transition:transform .2s}.about-overlay{z-index:10001;-webkit-backdrop-filter:blur(10px)saturate(120%);background:#14141647;justify-content:center;align-items:center;animation:.2s ease-out about-fade-in;display:flex;position:fixed;inset:0}.about-overlay.about-closing{animation:.2s ease-out forwards about-fade-out}@keyframes about-fade-in{0%{opacity:0;-webkit-backdrop-filter:blur()}to{opacity:1}}@keyframes about-fade-out{0%{opacity:1}to{opacity:0}}.about-panel{color:#353535;background:#fff;border:1px solid #0000001f;border-radius:14px;width:660px;max-width:calc(100vw - 40px);max-height:calc(100vh - 48px);padding:28px;font-family:Geist Mono,monospace;animation:.22s ease-out about-panel-enter;overflow-y:auto;box-shadow:0 4px 34px #0000002e}@keyframes about-panel-enter{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.about-header{justify-content:flex-end;margin-bottom:12px;display:flex}.about-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}.about-close:hover{color:#353535;background:#0000000a;border-color:#00000040}.about-close svg{stroke:currentColor;stroke-width:1.4px;stroke-linecap:round}.about-manifesto-text{letter-spacing:-.02em;color:#00000073;margin:0;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:21px;font-weight:500;line-height:1.28}.about-manifesto-text+.about-manifesto-text{margin-top:1.15em}.about-hl{color:#111}.about-avatar{object-fit:cover;vertical-align:-.24em;border-radius:50%;width:1.15em;height:1.15em;margin:0 .14em;display:inline-block}.about-name{font:inherit;color:inherit;cursor:pointer;text-underline-offset:.12em;background:0 0;border:0;padding:0;-webkit-text-decoration:underline #00000080;text-decoration:underline #00000080;text-decoration-thickness:.055em;transition:text-decoration-color .2s}.about-name:hover{text-decoration-color:currentColor}.about-watch-pill{z-index:10005;pointer-events:none;color:#17171c;white-space:nowrap;opacity:0;background:#fff;border-radius:999px;align-items:center;gap:8px;padding:6px 12px 6px 7px;font-family:Geist Mono,monospace;font-size:12.5px;font-weight:600;animation:.28s .9s forwards about-watch-pill-in;display:inline-flex;position:fixed;transform:translate(-50%);box-shadow:0 8px 24px #00000059}@keyframes about-watch-pill-in{0%{opacity:0;transform:translate(-50%)translateY(4px)}to{opacity:1;transform:translate(-50%)translateY(0)}}.about-watch-pill-play{color:#fff;background:#17171c;border-radius:5px;flex-shrink:0;justify-content:center;align-items:center;width:18px;height:18px;display:inline-flex}.about-watch-pill-play svg{width:9px;height:9px;margin-left:.5px}.about-video-modal{z-index:10006;-webkit-backdrop-filter:blur(16px);background:#09090cb8;justify-content:center;align-items:center;padding:clamp(16px,4vw,48px);animation:.22s about-video-modal-in;display:flex;position:fixed;inset:0}@keyframes about-video-modal-in{0%{opacity:0}to{opacity:1}}.about-video-modal-video{background:#000;border-radius:12px;width:auto;max-width:min(1100px,94vw);max-height:86vh;box-shadow:0 30px 90px #0009}.about-video-modal-close{color:#ececf2;cursor:pointer;background:#ffffff1a;border:0;border-radius:999px;justify-content:center;align-items:center;width:40px;height:40px;transition:background .2s;display:flex;position:absolute;top:clamp(14px,2.5vw,26px);right:clamp(14px,2.5vw,26px)}.about-video-modal-close:hover{background:#fff3}.about-video-modal-close svg{width:20px;height:20px}.about-footer-note{letter-spacing:-.02em;color:#111;border-top:1px solid #00000024;margin:26px 0 0;padding-top:20px;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:21px;font-weight:500;line-height:1.28}.about-footer-link{color:inherit;text-underline-offset:2px;text-decoration:underline;text-decoration-thickness:1px}.about-footer-spin{min-width:.7em;display:inline-block}.account-wrap{display:inline-flex;position:relative}.account-btn{letter-spacing:.4px;color:#0009;cursor:pointer;white-space:nowrap;background:0 0;border:1px solid #00000024;border-radius:6px;padding:5px 10px;font-family:Geist Mono,monospace;font-size:11px;transition:background .15s,border-color .15s,color .15s}.account-btn:hover{color:#353535;background:#0000000a;border-color:#00000047}.account-btn-pro{color:#353535;border-color:#353535;font-weight:600}.account-btn-loading{opacity:.4;pointer-events:none;width:54px;height:26px}.account-menu-backdrop{z-index:40;position:fixed;inset:0}.account-menu{z-index:41;background:#fff;border:1px solid #0000001f;border-radius:10px;min-width:180px;padding:6px;font-family:Geist Mono,monospace;position:absolute;top:calc(100% + 6px);right:0;box-shadow:0 4px 24px #00000024}.account-menu-email{color:#00000073;text-overflow:ellipsis;white-space:nowrap;border-bottom:1px solid #00000014;margin-bottom:4px;padding:6px 8px 8px;font-size:11px;overflow:hidden}.account-menu-item{text-align:left;color:#353535;cursor:pointer;background:0 0;border:none;border-radius:6px;width:100%;padding:8px;font-family:inherit;font-size:12px;transition:background .12s;display:block}.account-menu-item:hover:not(:disabled){background:#0000000d}.account-menu-item:disabled{opacity:.5;cursor:default}.account-menu-item-accent{color:#353535;font-weight:600}.keep-case{text-transform:none}.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}.paywall-overlay{z-index:10003;justify-content:center;align-items:center;animation:.2s ease-out paywall-fade-in;display:flex;position:fixed;inset:0}.paywall-overlay.paywall-closing{animation:.2s ease-out forwards paywall-fade-out}@keyframes paywall-fade-in{0%{opacity:0}to{opacity:1}}@keyframes paywall-fade-out{0%{opacity:1}to{opacity:0}}.paywall-panel{color:#353535;background:#fff;border:1px solid #0000001f;border-radius:16px;width:780px;max-width:calc(100vw - 32px);max-height:calc(100vh - 48px);padding:28px;font-family:Geist Mono,monospace;animation:.22s ease-out paywall-panel-enter;position:relative;overflow-y:auto;box-shadow:0 16px 64px #00000073}@keyframes paywall-panel-enter{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.paywall-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;position:absolute;top:16px;right:16px}.paywall-close:hover{color:#353535;background:#0000000a;border-color:#00000040}.paywall-close svg{stroke:currentColor;stroke-width:1.4px;stroke-linecap:round}.paywall-hero{grid-template-columns:1fr auto;align-items:start;gap:24px;margin-bottom:22px;padding-right:30px;display:grid}.paywall-headline{color:#111;margin:0 0 8px;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:30px;font-weight:700;line-height:1.1}.paywall-lede{color:#0000008c;max-width:260px;margin:0;font-size:12.5px;line-height:1.55}.paywall-features{flex-direction:column;gap:10px;margin:4px 0 0;padding:0;list-style:none;display:flex}.paywall-feature{color:#353535;align-items:center;gap:10px;font-size:12.5px;line-height:1.4;display:flex}.paywall-feature-check{flex:none;width:15px;height:15px;display:inline-flex}.paywall-feature-check svg{width:100%;height:100%}.paywall-buy-grid{grid-template-columns:1fr 1fr;align-items:stretch;gap:14px;display:grid}.paywall-buy-card{background:#f4f4f5;border-radius:14px;flex-direction:column;gap:14px;padding:20px;display:flex;position:relative}.paywall-buy-title{color:#111;margin:0 0 6px;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:17px;font-weight:700}.paywall-buy-desc{color:#00000080;margin:0;font-size:11.5px;line-height:1.5}.paywall-buy-price{align-items:baseline;gap:7px;margin:4px 0 6px;display:flex}.paywall-buy-amt,.paywall-buy-old,.paywall-buy-new{color:#111;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:40px;font-weight:700;line-height:1}.paywall-buy-old{transition:font-size .4s cubic-bezier(.4,0,.2,1),color .4s,margin-left .4s cubic-bezier(.4,0,.2,1)}.paywall-sub-card.is-annual .paywall-buy-old{color:#00000059;margin-left:8px;font-size:16px;text-decoration:line-through}.paywall-buy-new{opacity:0;white-space:nowrap;order:-1;max-width:0;transition:max-width .4s cubic-bezier(.4,0,.2,1),opacity .4s,transform .42s cubic-bezier(.34,1.06,.5,1);overflow:hidden;transform:translate(-16px)}.paywall-sub-card.is-annual .paywall-buy-new{opacity:1;max-width:160px;transform:translate(0)}.paywall-buy-per{color:#00000073;font-size:12px}.paywall-buy-save{letter-spacing:.5px;text-transform:uppercase;color:#10151a;opacity:0;border-radius:999px;align-self:center;padding:2px 8px;font-size:10px;font-weight:700;transition:opacity .3s .12s;animation:6s ease-in-out infinite paywall-save-hue}.paywall-sub-card.is-annual .paywall-buy-save{opacity:1}@keyframes paywall-save-hue{0%,to{background:#44a8ff}33%{background:#7ae093}66%{background:#e092ff}}.paywall-buy-btn{color:#fff;letter-spacing:.4px;cursor:pointer;background:#1a1a1a;border:none;border-radius:10px;width:100%;margin-top:auto;padding:11px 12px;font-family:inherit;font-size:13px;font-weight:500;transition:background .15s}.paywall-buy-btn:hover:not(:disabled){background:#000}.paywall-buy-btn:disabled{opacity:.5;cursor:default}.paywall-toggle{background:#0000000f;border-radius:999px;gap:2px;padding:3px;display:inline-flex;position:absolute;top:16px;right:16px}.paywall-toggle-pill{letter-spacing:.3px;color:#00000080;cursor:pointer;background:0 0;border:none;border-radius:999px;padding:4px 11px;font-family:inherit;font-size:10.5px;font-weight:500;transition:background .15s,color .15s}.paywall-toggle-pill.is-active{color:#1a1a1a;background:#fff;box-shadow:0 1px 3px #0000001f}.paywall-detail-grid{grid-template-columns:1fr 1fr 1fr;gap:14px;margin-top:14px;display:grid}.paywall-detail-card{background:#f4f4f5;border-radius:14px;padding:18px}.paywall-detail-icon{color:#1a1a1a;width:20px;height:20px;margin-bottom:12px;display:inline-flex}.paywall-detail-icon svg{fill:none;stroke:currentColor;stroke-width:1.6px;stroke-linecap:round;stroke-linejoin:round;width:100%;height:100%}.paywall-detail-title{color:#111;margin:0 0 8px;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:13.5px;font-weight:700}.paywall-detail-body{color:#0000008c;margin:0;font-size:12px;line-height:1.4}.paywall-detail-link{color:#353535;text-decoration:underline}.paywall-error{color:#c0392b;text-align:center;margin-top:14px;font-size:12px;line-height:1.4}.paywall-signin-nudge{text-align:center;color:#00000080;margin-top:16px;font-size:12px;line-height:1.5}.paywall-signin-nudge button{color:#353535;cursor:pointer;background:0 0;border:none;padding:0;font-family:inherit;font-size:12px;text-decoration:underline}@media (width<=640px){.paywall-hero{grid-template-columns:1fr;gap:16px}.paywall-buy-grid,.paywall-detail-grid{grid-template-columns:1fr}}.rotate-hint{top:calc(10px + env(safe-area-inset-top));color:#353535;cursor:pointer;z-index:5;background:#fffffff2;border:1px solid #dbdbdb;border-radius:999px;align-items:center;gap:8px;padding:7px 13px;font-family:Geist Mono,monospace;font-size:11px;animation:.35s rotate-hint-in;display:none;position:fixed;left:50%;transform:translate(-50%);box-shadow:0 4px 14px #00000024}@media (pointer:coarse) and (orientation:portrait){.rotate-hint{display:flex}}.rotate-hint-phone{flex:none;width:14px;height:16px;animation:3.2s ease-in-out infinite rotate-hint-flip}@keyframes rotate-hint-flip{0%,22%{transform:rotate(0)}42%,82%{transform:rotate(-90deg)}to{transform:rotate(0)}}@keyframes rotate-hint-in{0%{opacity:0;transform:translate(-50%)translateY(-6px)}to{opacity:1;transform:translate(-50%)translateY(0)}}@font-face{font-family:Helvetica Neue;font-style:normal;font-weight:100;font-display:swap;src:url(/fonts/HelveticaNeue-Thin.woff2)format("woff2")}@font-face{font-family:Helvetica Neue;font-style:normal;font-weight:300;font-display:swap;src:url(/fonts/HelveticaNeue-Light.woff2)format("woff2")}@font-face{font-family:Helvetica Neue;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/HelveticaNeue-Roman.woff2)format("woff2")}@font-face{font-family:Helvetica Neue;font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/HelveticaNeue-Medium.woff2)format("woff2")}@font-face{font-family:Helvetica Neue;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/HelveticaNeue-Bold.woff2)format("woff2")}html,body{height:100%;display:block}body{align-items:initial;justify-content:initial;color:#353535;background:#fff;min-height:0;margin:0;overflow:hidden}#root{width:100%;height:100%}.page{width:100%;height:100dvh;position:relative;overflow:hidden}.page:before{content:"";pointer-events:none;background-image:radial-gradient(circle,#e7e7ea 1.1px,#0000 1.4px);background-size:22px 22px;animation:.9s backwards fade-in;position:absolute;inset:0}@keyframes fade-in{0%{opacity:0}}@keyframes rise-in{0%{opacity:0;transform:translateY(12px)}}.copy>*{animation:.55s cubic-bezier(.22,1,.36,1) backwards rise-in}.wordmark{animation-delay:1.05s}.headline{animation-delay:1.15s}.subhead{animation-delay:1.25s}.cta{animation-delay:1.35s}.works-with{animation-delay:1.45s}.made-by{animation:.7s 2.5s backwards fade-in}.board{animation:.7s 1.05s backwards fade-in}.marquee{animation:1.1s .55s backwards fade-in}@media (prefers-reduced-motion:reduce){.page:before,.copy>*,.board,.marquee{animation:none}}.copy{z-index:4;pointer-events:none;flex-direction:column;align-items:flex-start;padding:13vh clamp(24px,2.6vw,40px) 14px calc(50vw - 529px);display:flex;position:absolute;inset:0 auto 0 0}.copy>*{pointer-events:auto}.wordmark{letter-spacing:-.1px;color:#353535;font-family:Ubuntu,sans-serif;font-size:28px}.headline{letter-spacing:-.01em;color:#353535;max-width:440px;margin:clamp(20px,3.7vh,36px) 0 0;font-family:Helvetica Neue,sans-serif;font-size:46px;font-weight:400;line-height:1.1}.subhead{letter-spacing:-.02em;color:#353535;max-width:440px;margin:clamp(22px,4.4vh,43px) 0 0;font-family:Geist Mono,monospace;font-size:23px;font-weight:400;line-height:1.19}.cta{letter-spacing:-.02em;color:#353535;background:#d4d8ff;border:1px solid #000;border-radius:9px;justify-content:center;align-items:center;gap:12px;width:440px;height:clamp(52px,7.6vh,75px);margin-top:clamp(20px,3.6vh,35px);font-family:Geist Mono,monospace;font-size:23px;font-weight:700;text-decoration:none;transition:transform .12s,box-shadow .12s,background .12s;display:flex;box-shadow:0 3px #b9bde8}.cta:hover{background:#c9cefc}.cta:active{transform:translateY(3px);box-shadow:0 0 #b9bde8}.cta-arrow{width:19px;height:19px;transition:transform .12s}.cta:hover .cta-arrow{transform:translate(4px)}.works-with{align-self:center;align-items:flex-end;gap:14px;margin-top:clamp(20px,4vh,40px);display:flex}.works-with-label{color:#353535;text-underline-offset:5px;font-family:Geist Mono,monospace;font-size:16px;line-height:1.35;-webkit-text-decoration:underline wavy;text-decoration:underline wavy;text-decoration-thickness:1px}.works-with-logos{align-items:flex-end;gap:8px;display:flex}.works-with-logos img{object-fit:contain;border-radius:4px;width:28px;height:28px}.made-by{color:#353535;align-self:center;margin-top:auto;margin-bottom:clamp(18px,3.4vh,34px);font-family:Geist Mono,monospace;font-size:17px}.made-by-link{color:inherit;text-underline-offset:3px;text-decoration:underline}.board{z-index:3;pointer-events:none;width:0;height:0;position:absolute;top:58.9%;left:calc(50vw + 302px)}.board-rotor{transform:translate(-50%, -50%) rotate(90deg) scale(var(--board-scale,1.3));width:max-content}.board .dot-grid-canvas{display:none}.board .app-card{box-shadow:0 3px 22px #00000021}.marquee{left:0;top:var(--marquee-top,72vh);z-index:2;pointer-events:none;width:100%;height:auto;position:absolute}.marquee-text{fill:#353535;font-family:Helvetica Neue,sans-serif;font-size:28px;font-weight:700}@media (width<=1145px){.copy{text-align:center;align-items:center;width:100%;padding:26px 20px 14px}.wordmark{font-size:24px}.headline{max-width:min(92vw,480px);margin-top:26px;font-size:clamp(28px,8vw,34px)}.subhead{max-width:min(88vw,440px);margin-top:20px;font-size:16px}.cta{width:min(88vw,440px);height:56px;margin-top:24px;font-size:18px}.works-with{flex-direction:column;align-items:center;gap:14px;margin-top:24px}.works-with-label{text-align:center;font-size:16px}.works-with-logos img{width:34px;height:34px}.made-by{top:var(--m-madeby-top,58dvh);text-align:center;z-index:2;width:100%;margin:0;font-size:13px;position:absolute;left:0}.board{top:var(--m-board-top,62dvh);width:100vw;height:auto;bottom:0;left:0;right:auto;overflow:hidden}.board-frame{pointer-events:none;transform-origin:0 0;width:1240px;height:900px;transform:translate(var(--peek-x,100vw), var(--peek-y,0px)) rotate(90deg) scale(var(--peek-scale,.55));background:0 0;border:0;position:absolute;top:10px;left:0}.marquee{top:var(--m-marquee-top,52dvh);bottom:auto}}body.board-embed{justify-content:center;align-items:flex-start;overflow:hidden;background:0 0!important;display:flex!important}body.board-embed .dot-grid-canvas{display:none}body.board-embed .app-card{box-shadow:0 3px 22px #00000021}body.board-embed #root{width:auto}