@import"https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap";*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh}.App{width:100%;text-align:center;min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center}.piano-section{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;width:100%;max-width:1400px;margin:0 auto}.App-header{width:inherit;padding:20px;color:#fff;margin-bottom:20px;font-size:5vw}.title-container{height:120px;margin-bottom:10px;display:flex;align-items:center;justify-content:center;width:100%;max-width:100%;position:relative;z-index:20}@media (max-width: 768px){.title-container{height:80px}.App-header{margin:10px;padding:15px;font-size:15vw}}@media (max-width: 567px){.App-header{font-size:20vw}}.App-header h1{font-size:10rem;margin-bottom:10px;text-shadow:2px 2px 4px rgba(0,0,0,.1);font-weight:700}.App-header p{font-size:1.2rem;opacity:.8}.full-width{width:100vw}.piano-container{display:flex;justify-content:center;align-items:center;width:100%;box-sizing:border-box}.modal-header-buttons{display:flex;justify-content:space-between;align-items:center;width:100%;margin:20px;padding:15px}.modal-width{width:50vw}@media (max-width: 1000px){.modal-width{width:90vw}}.note-key-badge{color:#fff;padding:.5rem 1rem;border-radius:20px;font-size:.9rem;font-weight:100;border:1px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;height:40px;min-width:60px}.note-content{align-items:center;min-width:50vw;max-height:70vh;display:flex;flex-direction:column;padding:2rem;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent}.note-content::-webkit-scrollbar{width:8px}.note-content::-webkit-scrollbar-track{background:transparent}.note-content::-webkit-scrollbar-thumb{background:#ffffff4d;border-radius:4px}.note-content::-webkit-scrollbar-thumb:hover{background:#ffffff80}.note-title{color:#fff;font-size:5rem;margin:0 0 2rem;line-height:1.2;text-align:center;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:2rem;font-weight:100}.note-message{font-size:1.2rem;background:#ffffff0d;padding:.8rem;border-radius:16px;border-left:4px solid rgba(102,126,234,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);margin:1rem 0}.note-message p{margin:0;line-height:1.8;font-size:1.2rem;color:#ffffffe6;white-space:pre-wrap;font-weight:100}.note-author{text-align:right;margin:1rem 0;padding:.5rem 0}.author-nickname{margin:0;color:#ffffffb3;font-size:1rem;font-style:italic;font-weight:100}.note-media{justify-self:center;width:100%;margin:2.5rem 0;padding:1.5rem;background:#ffffff08;border-radius:12px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.note-media h3{color:#ffffffe6;margin-bottom:1.5rem;display:flex;align-items:center;gap:.5rem;font-size:1.4rem;font-weight:100}.note-media p{color:#ffffffb3;font-weight:100;margin-bottom:1rem;line-height:1.6}.video-container{position:relative;width:100%;height:0;padding-bottom:56.25%;border-radius:12px;overflow:hidden;box-shadow:0 4px 15px #0000004d}.video-container iframe{position:absolute;top:0;left:0;width:100%;height:100%}.uploaded-video{width:100%;max-height:400px;border-radius:12px;box-shadow:0 4px 15px #0000004d}.photos-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1.5rem;margin-top:1rem}.note-photo{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;border-radius:12px;cursor:pointer;transition:transform .2s ease;box-shadow:0 2px 8px #0000004d}.note-photo:hover{transform:scale(1.05);box-shadow:0 4px 15px #0006}.note-media audio{width:100%;margin-top:.5rem}.note-metadata{background:#ffffff0d;padding:1.5rem;border-radius:12px;margin:2rem 0;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.created-date{margin:0;color:#fff9;font-size:1rem;text-align:center;font-weight:100;line-height:1.5}.note-actions{display:flex;justify-content:center;gap:1rem;margin-top:2rem;padding-top:2rem;border-top:1px solid rgba(255,255,255,.1)}.edit-button{border:1px solid rgba(255,255,255,.2);padding:1rem 2.5rem;border-radius:25px;font-size:1.1rem;font-weight:100;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #ff6b6b4d}.edit-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #ff6b6b66}.note-actions .close-button{border:1px solid rgba(255,255,255,.2);padding:1rem 2.5rem;border-radius:25px;font-size:1.1rem;font-weight:100;cursor:pointer;transition:all .3s ease;background:#ffffff1a;color:#fffc}.note-actions .close-button:hover{background:#fff3;color:#fff;transform:translateY(-2px)}.password-prompt{text-align:center;padding:3rem 2rem}.password-prompt h3{color:#ffffffe6;margin-bottom:1.5rem;font-size:1.8rem;font-weight:100}.password-prompt p{color:#ffffffb3;margin-bottom:2.5rem;line-height:1.6;font-weight:100;font-size:1.1rem}.password-prompt form{display:flex;flex-direction:column;gap:2rem;max-width:350px;margin:0 auto}.password-prompt input{padding:1rem;border:1px solid rgba(255,255,255,.2);border-radius:12px;font-size:1.1rem;text-align:center;background:#ffffff0d;color:#fff;font-weight:100}.password-prompt input::-moz-placeholder{color:#ffffff80}.password-prompt input::placeholder{color:#ffffff80}.password-prompt input:focus{outline:none;border-color:#ffffff80;background:#ffffff1a;box-shadow:0 0 0 3px #ffffff1a}.password-actions{display:flex;gap:1.5rem;margin-top:1rem}.password-actions button{flex:1;padding:1rem;border:none;border-radius:12px;font-size:1.1rem;font-weight:100;cursor:pointer;transition:all .2s ease}.password-actions button[type=button]{background:#ffffff1a;color:#fffc;border:1px solid rgba(255,255,255,.2)}.password-actions button[type=button]:hover{background:#fff3;color:#fff;transform:translateY(-1px)}.password-actions button[type=submit]{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:1px solid rgba(255,255,255,.2)}.password-actions button[type=submit]:hover{transform:translateY(-2px);box-shadow:0 8px 25px #667eea66}.password-actions button:disabled{opacity:.6;cursor:not-allowed;transform:none!important}.password-actions button:disabled:hover{transform:none!important;box-shadow:none!important}.password-actions button.loading{position:relative;color:#fffc}.loading-spinner{display:inline-block;width:12px;height:12px;border:2px solid rgba(255,255,255,.3);border-top:2px solid rgba(255,255,255,.8);border-radius:50%;animation:spin 1s linear infinite;margin-right:8px}.password-prompt input:disabled{background-color:#ffffff0d;color:#ffffff80;cursor:not-allowed;border-color:#ffffff1a}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width: 768px){.note-title{font-size:1.5rem}.photos-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}.note-photo{height:120px}.password-actions{flex-direction:column}}.edit-note-modal{max-width:600px;width:95%;max-height:95vh;overflow-y:auto}.edit-header{display:flex;align-items:center;gap:1rem}.edit-header h2{color:#fff;margin:0;font-size:1.8rem;font-weight:100}.note-key-badge{color:#fff;padding:.5rem 1rem;border-radius:20px;font-size:.9rem;font-weight:100;border:1px solid rgba(255,255,255,.2)}.edit-note-form{display:flex;flex-direction:column;gap:1.5rem}.form-actions{display:flex;justify-content:space-between;align-items:center;margin-top:2rem;padding-top:2rem;border-top:1px solid rgba(255,255,255,.1);flex-wrap:wrap;gap:1rem}.main-actions{display:flex;gap:1rem}.delete-button{background:linear-gradient(135deg,#ff6b6b,#ff5252);color:#fff;border:1px solid rgba(255,255,255,.2);padding:.75rem 1.5rem;border-radius:8px;font-size:.9rem;font-weight:100;cursor:pointer;transition:all .2s ease}.delete-button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 15px #ff6b6b4d}.main-actions button{padding:.75rem 2rem;border:none;border-radius:8px;font-size:1rem;font-weight:100;cursor:pointer;transition:all .2s ease;min-width:120px}.main-actions button[type=button]{background:#ffffff1a;color:#fffc;border:1px solid rgba(255,255,255,.2)}.main-actions button[type=button]:hover:not(:disabled){background:#fff3;color:#fff;transform:translateY(-1px)}.main-actions button[type=submit]{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:1px solid rgba(255,255,255,.2)}.main-actions button[type=submit]:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 25px #667eea66}.main-actions button:disabled,.delete-button:disabled{opacity:.6;cursor:not-allowed;transform:none!important;box-shadow:none!important}.delete-confirm{text-align:center;padding:2rem}.delete-confirm h3{color:#fecaca;margin-bottom:1rem;font-size:1.5rem}.delete-confirm p{color:#fffc;margin-bottom:2rem;line-height:1.5;font-size:1.1rem}.delete-confirm strong{color:#fff;font-weight:700}.delete-actions{display:flex;gap:1rem;justify-content:center}.delete-actions button{padding:.75rem 2rem;border:none;border-radius:8px;font-size:1rem;font-weight:100;cursor:pointer;transition:all .2s ease;min-width:140px}.delete-actions button[type=button]:not(.confirm-delete){background:#ffffff1a;color:#fffc;border:1px solid rgba(255,255,255,.2)}.delete-actions button[type=button]:not(.confirm-delete):hover:not(:disabled){background:#fff3;color:#fff;transform:translateY(-1px)}.confirm-delete{background:linear-gradient(135deg,#d63031,#e17055);color:#fff;border:1px solid rgba(255,255,255,.2)}.confirm-delete:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 25px #d6303166}@media (max-width: 768px){.edit-note-modal{width:98%;margin:1rem}.form-actions{flex-direction:column;align-items:stretch}.main-actions{order:1}.delete-button{order:2;margin-top:1rem}.main-actions,.delete-actions{flex-direction:column}.main-actions button,.delete-actions button,.delete-button{width:100%}}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:2000;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.modal-content{background:#111;padding:2rem;border-radius:16px;max-width:600px;width:90%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px #00000080;border:1px solid rgba(255,255,255,.1)}.add-note-modal{max-width:600px;width:95%;max-height:95vh;overflow-y:auto}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;padding-bottom:1rem;border-bottom:1px solid rgba(255,255,255,.1);color:#fff}.modal-header h2{color:#fff;margin:0;font-size:1.8rem;font-weight:100}.close-button{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);font-size:2rem;cursor:pointer;color:#fffc;padding:0;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s ease}.close-button:hover{background:#fff3;color:#fff;transform:scale(1.1)}.add-note-form{display:flex;flex-direction:column;gap:1.5rem}.form-group{display:flex;flex-direction:column;gap:.5rem}.form-group label{font-weight:100;color:#ffffffe6;font-size:.95rem}.form-group input,.form-group textarea,.form-group select{padding:.75rem;border:1px solid rgba(255,255,255,.2);border-radius:8px;font-size:1rem;font-family:inherit;background:#ffffff0d;color:#fff;transition:all .2s ease}.form-group input::-moz-placeholder,.form-group textarea::-moz-placeholder{color:#ffffff80}.form-group input::placeholder,.form-group textarea::placeholder{color:#ffffff80}.form-group input:focus,.form-group textarea:focus,.form-group select:focus{outline:none;border-color:#ffffff80;background:#ffffff1a;box-shadow:0 0 0 3px #ffffff1a}.form-group textarea{resize:vertical;min-height:100px}.form-group small{color:#fff9;font-size:.85rem;margin-top:.25rem}.form-group input[type=file]{padding:.5rem;border:2px dashed rgba(255,255,255,.3);background:#ffffff0d;cursor:pointer;color:#fffc}.form-group input[type=file]:hover{border-color:#ffffff80;background:#ffffff1a}.error-message{background:#dc262633;color:#fecaca;padding:1rem;border-radius:8px;border:1px solid rgba(220,38,38,.3);font-weight:100}.form-actions{display:flex;gap:1rem;justify-content:flex-end;margin-top:2rem;padding-top:2rem;border-top:1px solid rgba(255,255,255,.1)}.form-actions button{padding:.75rem 2rem;border:none;border-radius:8px;font-size:1rem;font-weight:100;cursor:pointer;transition:all .2s ease;min-width:120px}.form-actions button[type=button]{background:#ffffff1a;color:#fffc;border:1px solid rgba(255,255,255,.2)}.form-actions button[type=button]:hover:not(:disabled){background:#fff3;color:#fff;transform:translateY(-1px)}.form-actions button[type=submit]{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:1px solid rgba(255,255,255,.2)}.form-actions button[type=submit]:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 25px #667eea66}.form-actions button:disabled{opacity:.6;cursor:not-allowed;transform:none!important;box-shadow:none!important}@media (max-width: 768px){.add-note-modal{width:98%;margin:1rem}.form-actions{flex-direction:column}.form-actions button{width:100%}}.piano{background:linear-gradient(145deg,#ffffff0d,#ffffff05,#0000000d);padding:30px;border-radius:24px;box-shadow:0 8px 32px #0000004d,0 2px 8px #0003,inset 0 1px #ffffff1a,inset 0 -1px #0003;-webkit-backdrop-filter:blur(20px) saturate(1.2);backdrop-filter:blur(20px) saturate(1.2);border:1px solid rgba(255,255,255,.15);width:100%;max-width:1289px;overflow-x:auto;margin:0 auto;position:relative;animation:float-subtle 6s ease-in-out infinite}@keyframes float-subtle{0%,to{transform:translateY(0) rotateX(0)}50%{transform:translateY(-2px) rotateX(.5deg)}}.piano-keys{display:flex;position:relative;height:200px;justify-content:flex-start}.piano-key{position:relative;cursor:pointer;transition:all .1s ease;-webkit-user-select:none;-moz-user-select:none;user-select:none;display:flex;align-items:flex-end;justify-content:center;padding-bottom:10px}.piano-key.white{width:24px;height:200px;background:#ffffffe6;border:1px solid rgba(200,200,200,.4);border-radius:0 0 4px 4px;box-shadow:0 2px 4px #0000001a;z-index:1}.piano-key.black{width:16px;height:130px;background:#141414e6;border:1px solid rgba(0,0,0,.6);border-radius:0 0 3px 3px;box-shadow:0 3px 6px #0000004d;margin-left:-8px;margin-right:-8px;z-index:2;position:relative}.piano-key:hover{transform:translateY(-2px) scale(1.02);transition:all .2s cubic-bezier(.4,0,.2,1)}.piano-key.white:hover{background:#f0f0f0f2;box-shadow:0 4px 8px #00000026}.piano-key.black:hover{background:#282828f2;box-shadow:0 4px 10px #0006}.piano-key.white:active{background:linear-gradient(145deg,#e6e6e6e6,#d2d2d2d9,#bebebecc);transform:translateY(1px) scale(.98);box-shadow:0 2px 4px #0003,inset 0 2px 4px #0000001a}.piano-key.black:active{background:linear-gradient(145deg,#323232f2,#1e1e1ee6,#0a0a0ad9);transform:translateY(1px) scale(.98);box-shadow:0 2px 8px #0009,inset 0 2px 4px #0000004d}.piano-key.has-note{position:relative}.piano-key.has-note:before{content:"";position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;background:linear-gradient(45deg,#ffd70066,#ffa5004d,#ff14934d,#8a2be24d,#00bfff66);border-radius:inherit;z-index:-1;animation:pulse-glow 2s ease-in-out infinite alternate}@keyframes pulse-glow{0%{opacity:.5}to{opacity:.8}}.piano-key.white.has-note{background:linear-gradient(145deg,#fff8dcf2,#f0e68ce6,#ffefd5d9);box-shadow:0 6px 12px #ffd70033,0 2px 4px #0000001a,inset 0 1px #ffffffe6,inset 0 -1px #ffd70033}.piano-key.black.has-note{background:linear-gradient(145deg,#4a4a2af2,#2a2a1ae6,#3c3c1ed9);box-shadow:0 8px 16px #ffd7004d,0 4px 8px #0006,inset 0 1px #ffffff26,inset 0 -1px #ffd7001a}.key-label{font-size:9px;font-weight:700;opacity:.7;pointer-events:none;writing-mode:vertical-rl;text-orientation:mixed}.note-indicator{position:absolute;top:8px;right:50%;transform:translate(50%);color:#ff6b6b;font-size:14px;font-weight:700;pointer-events:none;text-shadow:0 0 8px rgba(255,107,107,.6);animation:note-pulse 1.5s ease-in-out infinite}@keyframes note-pulse{0%,to{transform:translate(50%) scale(1);opacity:.8}50%{transform:translate(50%) scale(1.1);opacity:1}}.piano-key.white .key-label{color:#666}.piano-key.black .key-label{color:#ccc}@media (max-width: 768px){.piano{padding:10px;margin:0 10px}.piano-keys{min-width:1040px;height:150px}.piano-key.white{width:20px;height:150px}.piano-key.black{width:14px;height:100px;margin-left:-7px;margin-right:-7px}.key-label{font-size:8px}}/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{@supports ((-webkit-hyphens:none) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-animation-delay:0s;--tw-animation-direction:normal;--tw-animation-duration:initial;--tw-animation-fill-mode:none;--tw-animation-iteration-count:1;--tw-enter-opacity:1;--tw-enter-rotate:0;--tw-enter-scale:1;--tw-enter-translate-x:0;--tw-enter-translate-y:0;--tw-exit-opacity:1;--tw-exit-rotate:0;--tw-exit-scale:1;--tw-exit-translate-x:0;--tw-exit-translate-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-pan-x:initial;--tw-pan-y:initial;--tw-pinch-zoom:initial;--tw-space-y-reverse:0;--tw-space-x-reverse:0;--tw-divide-x-reverse:0;--tw-border-style:solid;--tw-divide-y-reverse:0;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial}}}@property --tw-animation-delay{syntax:"*";inherits:false;initial-value:0s}@property --tw-animation-direction{syntax:"*";inherits:false;initial-value:normal}@property --tw-animation-duration{syntax:"*";inherits:false}@property --tw-animation-fill-mode{syntax:"*";inherits:false;initial-value:none}@property --tw-animation-iteration-count{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-translate-y{syntax:"*";inherits:false;initial-value:0}.pointer-events-none{pointer-events:none}.collapse{visibility:collapse}.invisible{visibility:hidden}.visible{visibility:visible}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.not-sr-only{clip:auto;white-space:normal;width:auto;height:auto;margin:0;padding:0;position:static;overflow:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.-top-1\/4{top:-25%}.-top-\[14px\]{top:-14px}.-left-\[22px\]{left:-22px}.left-1\/4{left:25%}.isolate{isolation:isolate}.isolation-auto{isolation:auto}.z-0{z-index:0}.z-10{z-index:10}.z-20{z-index:20}.container{width:100%}.block{display:block}.contents{display:contents}.flex{display:flex}.flow-root{display:flow-root}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.inline-grid{display:inline-grid}.inline-table{display:inline-table}.list-item{display:list-item}.table{display:table}.table-caption{display:table-caption}.table-cell{display:table-cell}.table-column{display:table-column}.table-column-group{display:table-column-group}.table-footer-group{display:table-footer-group}.table-header-group{display:table-header-group}.table-row{display:table-row}.table-row-group{display:table-row-group}.h-\[20rem\]{height:20rem}.h-auto{height:auto}.h-full{height:100%}.min-h-screen{min-height:100vh}.w-auto{width:auto}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.shrink{flex-shrink:1}.grow{flex-grow:1}.border-collapse{border-collapse:collapse}.-translate-x-1\/2{--tw-translate-x: -50% ;translate:var(--tw-translate-x)var(--tw-translate-y)}.-translate-y-1\/2{--tw-translate-y: -50% ;translate:var(--tw-translate-x)var(--tw-translate-y)}.translate-none{translate:none}.scale-3d{scale:var(--tw-scale-x)var(--tw-scale-y)var(--tw-scale-z)}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.touch-pinch-zoom{--tw-pinch-zoom:pinch-zoom;touch-action:var(--tw-pan-x,)var(--tw-pan-y,)var(--tw-pinch-zoom,)}.resize{resize:both}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}:where(.space-y-reverse>:not(:last-child)){--tw-space-y-reverse:1}:where(.space-x-reverse>:not(:last-child)){--tw-space-x-reverse:1}:where(.divide-x>:not(:last-child)){--tw-divide-x-reverse:0;border-inline-style:var(--tw-border-style);border-inline-start-width:calc(1px*var(--tw-divide-x-reverse));border-inline-end-width:calc(1px*calc(1 - var(--tw-divide-x-reverse)))}:where(.divide-y>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px*var(--tw-divide-y-reverse));border-bottom-width:calc(1px*calc(1 - var(--tw-divide-y-reverse)))}:where(.divide-y-reverse>:not(:last-child)){--tw-divide-y-reverse:1}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.rounded-lg{border-radius:var(--radius)}.rounded-xl{border-radius:calc(var(--radius) + 4px)}.border{border-style:var(--tw-border-style);border-width:1px}.border-x{border-inline-style:var(--tw-border-style);border-inline-width:1px}.border-y{border-block-style:var(--tw-border-style);border-block-width:1px}.border-s{border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px}.border-e{border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.\[mask-image\:radial-gradient\(transparent\,white\)\]{-webkit-mask-image:radial-gradient(#0000,#fff);mask-image:radial-gradient(#0000,#fff)}.bg-repeat{background-repeat:repeat}.mask-no-clip{-webkit-mask-clip:no-clip;mask-clip:no-clip}.mask-repeat{-webkit-mask-repeat:repeat;mask-repeat:repeat}.fill-transparent{fill:#0000}.stroke-\[1px\]{stroke-width:1px}.text-center{text-align:center}.font-\[helvetica\]{font-family:helvetica}.text-wrap{text-wrap:wrap}.text-clip{text-overflow:clip}.text-ellipsis{text-overflow:ellipsis}.capitalize{text-transform:capitalize}.lowercase{text-transform:lowercase}.normal-case{text-transform:none}.uppercase{text-transform:uppercase}.italic{font-style:italic}.not-italic{font-style:normal}.diagonal-fractions{--tw-numeric-fraction:diagonal-fractions;font-variant-numeric:var(--tw-ordinal,)var(--tw-slashed-zero,)var(--tw-numeric-figure,)var(--tw-numeric-spacing,)var(--tw-numeric-fraction,)}.lining-nums{--tw-numeric-figure:lining-nums;font-variant-numeric:var(--tw-ordinal,)var(--tw-slashed-zero,)var(--tw-numeric-figure,)var(--tw-numeric-spacing,)var(--tw-numeric-fraction,)}.oldstyle-nums{--tw-numeric-figure:oldstyle-nums;font-variant-numeric:var(--tw-ordinal,)var(--tw-slashed-zero,)var(--tw-numeric-figure,)var(--tw-numeric-spacing,)var(--tw-numeric-fraction,)}.ordinal{--tw-ordinal:ordinal;font-variant-numeric:var(--tw-ordinal,)var(--tw-slashed-zero,)var(--tw-numeric-figure,)var(--tw-numeric-spacing,)var(--tw-numeric-fraction,)}.proportional-nums{--tw-numeric-spacing:proportional-nums;font-variant-numeric:var(--tw-ordinal,)var(--tw-slashed-zero,)var(--tw-numeric-figure,)var(--tw-numeric-spacing,)var(--tw-numeric-fraction,)}.slashed-zero{--tw-slashed-zero:slashed-zero;font-variant-numeric:var(--tw-ordinal,)var(--tw-slashed-zero,)var(--tw-numeric-figure,)var(--tw-numeric-spacing,)var(--tw-numeric-fraction,)}.stacked-fractions{--tw-numeric-fraction:stacked-fractions;font-variant-numeric:var(--tw-ordinal,)var(--tw-slashed-zero,)var(--tw-numeric-figure,)var(--tw-numeric-spacing,)var(--tw-numeric-fraction,)}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,)var(--tw-slashed-zero,)var(--tw-numeric-figure,)var(--tw-numeric-spacing,)var(--tw-numeric-fraction,)}.normal-nums{font-variant-numeric:normal}.line-through{text-decoration-line:line-through}.no-underline{text-decoration-line:none}.overline{text-decoration-line:overline}.underline{text-decoration-line:underline}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.subpixel-antialiased{-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto}.inset-ring{--tw-inset-ring-shadow:inset 0 0 0 1px var(--tw-inset-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.backdrop-grayscale{--tw-backdrop-grayscale:grayscale(100%);-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.backdrop-invert{--tw-backdrop-invert:invert(100%);-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.backdrop-sepia{--tw-backdrop-sepia:sepia(100%);-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,visibility,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition\!{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,visibility,content-visibility,overlay,pointer-events!important;transition-timing-function:var(--tw-ease,ease)!important;transition-duration:var(--tw-duration,0s)!important}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.duration-200{--tw-duration:.2s;transition-duration:.2s}.ease-linear{--tw-ease:linear;transition-timing-function:linear}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.\[transform-style\:preserve-3d\]{transform-style:preserve-3d}:where(.divide-x-reverse>:not(:last-child)){--tw-divide-x-reverse:1}.paused{animation-play-state:paused}.ring-inset{--tw-ring-inset:inset}.running{animation-play-state:running}.zoom-in{--tw-enter-scale:0}.zoom-out{--tw-exit-scale:0}.\[\&\>\*\]\:\[transform-style\:preserve-3d\]>*{transform-style:preserve-3d}:root{color-scheme:light dark;color:#ffffffde;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;--radius:.625rem;--background:oklch(100% 0 0);--foreground:oklch(14.5% 0 0);--card:oklch(100% 0 0);--card-foreground:oklch(14.5% 0 0);--popover:oklch(100% 0 0);--popover-foreground:oklch(14.5% 0 0);--primary:oklch(20.5% 0 0);--primary-foreground:oklch(98.5% 0 0);--secondary:oklch(97% 0 0);--secondary-foreground:oklch(20.5% 0 0);--muted:oklch(97% 0 0);--muted-foreground:oklch(55.6% 0 0);--accent:oklch(97% 0 0);--accent-foreground:oklch(20.5% 0 0);--destructive:oklch(57.7% .245 27.325);--border:oklch(92.2% 0 0);--input:oklch(92.2% 0 0);--ring:oklch(70.8% 0 0);--chart-1:oklch(64.6% .222 41.116);--chart-2:oklch(60% .118 184.704);--chart-3:oklch(39.8% .07 227.392);--chart-4:oklch(82.8% .189 84.429);--chart-5:oklch(76.9% .188 70.08);--sidebar:oklch(98.5% 0 0);--sidebar-foreground:oklch(14.5% 0 0);--sidebar-primary:oklch(20.5% 0 0);--sidebar-primary-foreground:oklch(98.5% 0 0);--sidebar-accent:oklch(97% 0 0);--sidebar-accent-foreground:oklch(20.5% 0 0);--sidebar-border:oklch(92.2% 0 0);--sidebar-ring:oklch(70.8% 0 0);background-color:#242424;font-family:Inter,system-ui,Avenir,Helvetica,sans-serif;font-weight:100;line-height:1.5}a{color:#646cff;-webkit-text-decoration:inherit;text-decoration:inherit;font-weight:100}a:hover{color:#535bf2}body{background-color:#000;place-items:center;min-width:320px;min-height:100vh;margin:0}h1{font-size:3.2em;line-height:1.1}button{cursor:pointer;background-color:#1a1a1a;border:1px solid #0000;border-radius:8px;padding:.6em 1.2em;font-family:inherit;font-size:1em;font-weight:100;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.dark{--background:oklch(14.5% 0 0);--foreground:oklch(98.5% 0 0);--card:oklch(20.5% 0 0);--card-foreground:oklch(98.5% 0 0);--popover:oklch(20.5% 0 0);--popover-foreground:oklch(98.5% 0 0);--primary:oklch(92.2% 0 0);--primary-foreground:oklch(20.5% 0 0);--secondary:oklch(26.9% 0 0);--secondary-foreground:oklch(98.5% 0 0);--muted:oklch(26.9% 0 0);--muted-foreground:oklch(70.8% 0 0);--accent:oklch(26.9% 0 0);--accent-foreground:oklch(98.5% 0 0);--destructive:oklch(70.4% .191 22.216);--border:oklch(100% 0 0/.1);--input:oklch(100% 0 0/.15);--ring:oklch(55.6% 0 0);--chart-1:oklch(48.8% .243 264.376);--chart-2:oklch(69.6% .17 162.48);--chart-3:oklch(76.9% .188 70.08);--chart-4:oklch(62.7% .265 303.9);--chart-5:oklch(64.5% .246 16.439);--sidebar:oklch(20.5% 0 0);--sidebar-foreground:oklch(98.5% 0 0);--sidebar-primary:oklch(48.8% .243 264.376);--sidebar-primary-foreground:oklch(98.5% 0 0);--sidebar-accent:oklch(26.9% 0 0);--sidebar-accent-foreground:oklch(98.5% 0 0);--sidebar-border:oklch(100% 0 0/.1);--sidebar-ring:oklch(55.6% 0 0)}@layer base{*{border-color:var(--border);outline-color:var(--ring)}@supports (color:color-mix(in lab,red,red)){*{outline-color:color-mix(in oklab,var(--ring)50%,transparent)}}body{background-color:var(--background);color:var(--foreground)}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-pan-x{syntax:"*";inherits:false}@property --tw-pan-y{syntax:"*";inherits:false}@property --tw-pinch-zoom{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-space-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-divide-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-divide-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}