@import "https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&family=Patrick+Hand&family=Inter:wght@400;600;700&display=swap";html,body{color:#333;-webkit-user-select:none;user-select:none;background-color:#0000;background-image:linear-gradient(90deg,#ffffff0d 1px,#0000 1px),linear-gradient(#7a8cb4 0%,#9994c6 60%,#e2a89f 100%);background-position:0 0,0 0;background-repeat:repeat,repeat;background-size:84px 100%,100% 100%;background-attachment:fixed;background-origin:padding-box,padding-box;background-clip:border-box,border-box;margin:0;padding:0}.keyboard-container{justify-content:center;width:100%;margin-top:-15px;padding:0 0 15px;display:flex;position:relative}.keyboard{aspect-ratio:52/5;width:100%;position:relative}.key-white{z-index:2;box-sizing:border-box;background-color:#fcfcf5;border:3px solid #111;border-width:3px 1.5px;border-radius:0 0 10px 10px;height:100%;transition:transform 50ms,background-color .1s;position:absolute;top:0;box-shadow:inset -2px -4px #0000000d}.key-white.active{transform:translateY(6px);box-shadow:inset -2px -4px #0000001a}.hand-drawn .key-white.active{transform:translateY(6px)rotate(-1deg)}.key-black{z-index:4;box-sizing:border-box;background-color:#222;border:3px solid #111;border-radius:0 0 8px 8px;height:60%;transition:transform 50ms,background-color .1s;position:absolute;top:0;box-shadow:inset -2px -4px #ffffff1a}.key-black.active{transform:translateY(4px)}.hand-drawn .key-black.active{transform:translateY(4px)rotate(1deg)}.key-label{text-align:center;color:#111;pointer-events:none;width:100%;font-family:Patrick Hand,cursive;font-size:1.1rem;position:absolute;bottom:8px}.key-white.active .key-label{color:#056}.sustain-indicator-container{z-index:10;pointer-events:none;align-items:center;gap:8px;display:flex;position:absolute;top:-30px;right:20px}.sustain-text{color:#111;text-shadow:1px 1px #fffc;font-family:Patrick Hand,cursive;font-size:1.5rem}.sustain-light{background-color:#555;border:2px solid #111;border-radius:50%;width:12px;height:12px;transition:background-color .1s,box-shadow .1s;box-shadow:inset 1px 1px 2px #00000080}.sustain-light.active{background-color:#f33;box-shadow:0 0 8px #f33c,inset 1px 1px 2px #fff6}.chord-display-container{text-align:center;box-sizing:border-box;background-color:#fcfcf5;border:4px solid #111;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;margin:10px 0;padding:20px;display:flex;box-shadow:4px 6px #00000026}.hand-drawn .chord-display-container{transform:rotate(1deg)}.chord-name{color:#111;margin:0;font-family:Patrick Hand,cursive;font-size:3rem;font-weight:700;line-height:1}.chord-notes{color:#555;letter-spacing:2px;word-wrap:break-word;overflow-wrap:break-word;width:100%;min-height:1.5rem;max-height:100%;margin-top:10px;padding-bottom:4px;font-family:Patrick Hand,cursive;font-size:1.5rem;line-height:1.3;overflow-y:auto}.chord-notes::-webkit-scrollbar{display:none}.chord-notes{-ms-overflow-style:none;scrollbar-width:none}.no-chord{color:#888;font-size:2rem}.chord-ext{vertical-align:super;margin-left:2px;font-size:.6em}.chord-bass{margin-left:2px;font-size:.8em}.staff-display-container{box-sizing:border-box;background-color:#fcfcf5;border:4px solid #111;border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;width:100%;height:100%;padding:0;display:flex;overflow:hidden;box-shadow:8px 12px 15px #00000026}.hand-drawn .staff-display-container{transform:rotate(.5deg)}.staff-display{justify-content:center;align-items:center;width:100%;height:100%;margin-top:-30px;display:flex}.staff-display svg{overflow:visible}.staff-display svg path{stroke:#111;fill:#111}.settings-toggle-btn{cursor:pointer;z-index:100;color:#111;background-color:#fcfcf5;border:3px solid #111;border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;transition:transform .1s,box-shadow .1s;display:flex;position:absolute;top:1.5rem;right:1.5rem;box-shadow:2px 4px #0000001a}.settings-toggle-btn:hover{transform:translateY(-2px);box-shadow:2px 6px #00000026}.settings-toggle-btn:active{transform:translateY(2px);box-shadow:0 2px #0000001a}.settings-overlay{z-index:1000;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background-color:#0006;justify-content:center;align-items:center;animation:.2s fadeIn;display:flex;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.settings-panel{background-color:#fcfcf5;border:4px solid #111;border-radius:12px;width:90%;max-width:400px;max-height:80vh;padding:2rem;transition:all .2s ease-in-out;overflow:hidden auto;box-shadow:8px 12px 15px #00000026}.settings-panel::-webkit-scrollbar{width:14px}.settings-panel::-webkit-scrollbar-track{background:0 0;margin:12px 0}.settings-panel::-webkit-scrollbar-thumb{background-color:#111;border:4px solid #fcfcf5;border-radius:12px}.settings-panel::-webkit-scrollbar-thumb:hover{background-color:#333}.settings-panel.wide{max-width:760px}.hand-drawn .settings-panel{transform:rotate(-1deg)}.settings-header{border-bottom:3px solid #111;justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding-bottom:1rem;display:flex}.settings-header h2{color:#111;margin:0;font-family:Patrick Hand,cursive;font-size:2.2rem}.close-btn{cursor:pointer;color:#111;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:.5rem;transition:background-color .2s;display:flex}.close-btn:hover{background-color:#0000000d}.settings-content-grid{grid-template-columns:1fr;gap:1.5rem;display:grid}@media (width>=600px){.settings-content-grid{grid-template-columns:1fr 1fr}}.settings-section{background:#f0eee3;border:2px solid #111;border-radius:8px;flex-direction:column;gap:.75rem;padding:1rem;display:flex;box-shadow:4px 4px #00000026}.settings-section.full-width{background:#eae8de;grid-column:1/-1}.settings-section h3{color:#111;align-items:center;gap:.5rem;margin:0 0 .5rem;font-family:Patrick Hand,cursive;font-size:1.5rem;display:flex}.setting-row{color:#111;cursor:pointer;justify-content:space-between;align-items:center;padding:.25rem 0;font-size:1rem;font-weight:500;display:flex}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.setting-row input[type=checkbox]{accent-color:#ffadad;cursor:pointer;width:24px;height:24px}.setting-row-vertical{color:#111;flex-direction:column;gap:12px;font-family:Patrick Hand,cursive;font-size:1.4rem;display:flex}.background-thumbnails{flex-wrap:wrap;gap:12px;display:flex}.background-thumbnails.wide-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:16px;display:grid}.thumbnail-btn{aspect-ratio:1;cursor:pointer;background-color:#fff;border:3px solid #111;border-radius:8px;width:100%;padding:0;transition:transform .1s,border-color .2s,box-shadow .2s;position:relative;overflow:hidden;box-shadow:2px 2px #0000001a}.thumbnail-btn:hover{transform:translateY(-2px)}.thumbnail-btn.active{border-color:#00e5ff;transform:scale(1.05);box-shadow:0 0 15px #00e5ff99}.active-overlay{color:#fff;text-shadow:0 2px 4px #00000080;background-color:#00e5ff33;justify-content:center;align-items:center;font-family:sans-serif;font-size:2rem;display:flex;position:absolute;inset:0}.reset-layout-btn{color:#111;cursor:pointer;background-color:#fcfcf5;border:3px solid #111;border-radius:8px;width:100%;margin-top:1rem;padding:12px;font-family:Patrick Hand,cursive;font-size:1.4rem;font-weight:700;transition:transform .1s,box-shadow .1s;box-shadow:2px 4px #0000001a}.reset-layout-btn:hover{transform:translateY(-2px);box-shadow:2px 6px #00000026}.reset-layout-btn:active{transform:translateY(2px);box-shadow:0 2px #0000001a}.spelling-select{color:#111;cursor:pointer;background-color:#0000;border:2px solid #111;border-radius:6px;outline:none;padding:4px 8px;font-family:Patrick Hand,cursive;font-size:1.2rem}.activation-container{color:#333;background:#fcfcf5;justify-content:center;align-items:center;width:100vw;height:100vh;font-family:system-ui,-apple-system,sans-serif;display:flex}.activation-card{text-align:center;background:#fff;border-radius:16px;width:100%;max-width:400px;padding:40px;box-shadow:0 10px 30px #0000000d,0 1px 3px #0000000d}.activation-header{margin-bottom:30px}.mascot-wrapper{margin-bottom:20px}.activation-mascot{object-fit:contain;width:80px;height:80px}.activation-header h1{color:#111;margin:0 0 10px;font-size:24px}.activation-header p{color:#666;margin:0;font-size:14px;line-height:1.5}.input-group{margin-bottom:15px;position:relative}.input-icon{color:#999;position:absolute;top:50%;left:14px;transform:translateY(-50%)}.input-group input{box-sizing:border-box;border:1px solid #e0e0e0;border-radius:8px;outline:none;width:100%;padding:12px 12px 12px 42px;font-family:monospace;font-size:16px;transition:border-color .2s}.input-group input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.error-message{color:#ef4444;background:#fef2f2;border:1px solid #fee2e2;border-radius:6px;margin-bottom:15px;padding:10px;font-size:14px}.activate-btn{color:#fff;cursor:pointer;background:#111;border:none;border-radius:8px;justify-content:center;align-items:center;width:100%;padding:12px;font-size:16px;font-weight:500;transition:background .2s,transform .1s;display:flex}.activate-btn:hover:not(:disabled){background:#333}.activate-btn:active:not(:disabled){transform:scale(.98)}.activate-btn:disabled{cursor:not-allowed;background:#ccc}.spin{animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.activation-footer{color:#888;margin-top:25px;font-size:13px}.activation-footer a{color:#3b82f6;text-decoration:none}.activation-footer a:hover{text-decoration:underline}:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;font-family:Patrick Hand,cursive}.font-serious .app-title,.font-serious .chord-name,.font-serious .chord-notes,.font-serious .key-label,.font-serious .sustain-text,.font-serious .floating-note-label,.font-serious .device-select,.font-serious .setting-row,.font-serious .settings-header h2,.font-serious .reset-layout-btn,.font-serious .spelling-select,.font-serious .setting-row-vertical{font-family:Inter,sans-serif!important}body{min-width:320px;min-height:100vh;margin:0;display:flex;overflow:hidden}#root{box-sizing:border-box;flex-direction:column;width:100%;margin:0;padding:0;display:flex}.app-container{flex-direction:column;width:100vw;height:100vh;display:flex}.header{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:30;background-color:#f2f2e6d9;border-bottom:3px solid #111;flex-shrink:0;justify-content:space-between;align-items:center;padding:1rem 2rem;display:flex;position:relative}.app-title{color:#111;text-shadow:2px 2px #fffc;margin:0;font-family:Patrick Hand,cursive;font-size:3.5rem;font-weight:700}.mascot-logo{object-fit:contain;width:auto;height:90px;margin-right:20px}.device-select-container{background-color:#ffffffb3;border:3px solid #111;border-radius:12px;align-items:center;gap:10px;margin-right:4rem;padding:10px 20px;display:flex;box-shadow:4px 4px #0000001a}.device-select-container label{color:#111;font-size:1.2rem;font-weight:600}.device-select{color:#111;cursor:pointer;background-color:#0000;border:2px solid #111;border-radius:6px;outline:none;padding:4px 12px;font-family:Patrick Hand,cursive;font-size:1.1rem}.device-select:focus{border-color:#00e5ff}.error-banner{color:#ff007f;text-align:center;background-color:#ff00001a;border:1px solid #ff007f;border-radius:8px;flex-shrink:0;margin-bottom:1rem;padding:1rem}.main-content{flex-direction:column;flex-grow:1;display:flex;position:relative;overflow:hidden}.overlay-layer{pointer-events:none;z-index:20;position:absolute;inset:0}.overlay-layer>*{pointer-events:auto}.draggable-box{cursor:grab!important}.draggable-box:active{cursor:grabbing!important}.piano-section{flex-direction:column;flex-grow:1;justify-content:flex-end;display:flex;position:relative;overflow:hidden}.app-container.hand-drawn .chord-display-container,.app-container.hand-drawn .staff-display-container,.app-container.hand-drawn .piano-section{-webkit-filter:url(#squiggly-subtle)}.popout-btn{cursor:pointer;color:#666;opacity:0;z-index:10;background:#0000000d;border:none;border-radius:4px;justify-content:center;align-items:center;width:24px;height:24px;transition:opacity .2s,background .2s;display:flex;position:absolute;top:6px;right:6px}.draggable-box:hover .popout-btn{opacity:1}.popout-btn:hover{color:#111;background:#0000001a}.popout-container{border-radius:12px}.popout-container .chord-display-container,.popout-container .staff-display-container{box-shadow:none!important;border:none!important}