:root{--color-black: #000000;--color-white: #FFFFFF;--color-gray-300: #D1D5DB;--bg-color: var(--color-white);--text-color: var(--color-black);--border-color: var(--color-black);--font-sans: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-size-xs: 12px;--font-size-sm: 14px;--font-size-base: 16px;--font-size-lg: 18px;--font-size-xl: 24px;--font-size-2xl: 30px;--font-weight-normal: 400;--font-weight-semibold: 600;--font-weight-bold: 700;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--radius-0: 0px;--radius-2: 8px;--radius-full: 9999px;--border-1: 1px;--border-2: 2px;--chord-card-size: 65px;--chord-card-radius: var(--radius-2);--chord-card-border: var(--border-2) solid var(--border-color);--fingering-scale: .8;--hole-stroke: 1.5px;--hole-fill-open: var(--color-white);--hole-fill-closed: var(--color-black)}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0;height:100%}body{font-family:var(--font-sans);color:var(--text-color);background:var(--color-white)}img,svg{display:block;max-width:100%}button{border:0;margin:0;padding:0;background:transparent;color:inherit;font:inherit;line-height:normal;cursor:pointer}a{color:inherit;text-decoration:none}ul,ol{margin:0;padding:0;list-style:none}:root{color-scheme:light}.app{min-height:100dvh;display:flex;flex-direction:column;padding:var(--space-2) var(--space-4) var(--space-4) var(--space-4);background:var(--color-white)}.row{display:flex;gap:var(--space-2);align-items:center}.col{display:flex;flex-direction:column;gap:var(--space-2)}.is-hover:hover,.is-active,.is-active:hover{background:var(--color-black);color:var(--color-white)}.btn-sm{padding:var(--space-1) var(--space-3);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);border:var(--border-2) solid var(--color-black);border-radius:var(--radius-2);background:var(--color-white);color:var(--color-black);cursor:pointer;transition:all .2s ease;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1);outline:none}select.btn-sm:focus,select.btn-sm:active{outline:none!important;border-color:var(--color-black)!important}.btn-sm:hover:not(:disabled){background:var(--color-black);color:var(--color-white)}.btn-sm:disabled{opacity:.5;cursor:not-allowed}.btn-sm.is-active{background:var(--color-black);color:var(--color-white)}.btn{padding:var(--space-1) var(--space-4);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);border:var(--border-2) solid var(--color-black);border-radius:var(--radius-2);background:var(--color-white);color:var(--color-black);cursor:pointer;transition:all .2s ease}.btn:hover:not(:disabled){background:var(--color-black);color:var(--color-white)}.icon-btn-sm{width:24px;height:24px;border:var(--border-2) solid var(--border-color);border-radius:var(--radius-full);display:inline-flex;align-items:center;justify-content:center;background:var(--color-white);color:var(--color-black);cursor:pointer;transition:all .2s ease;box-shadow:0 2px 8px #0000001a;flex-shrink:0}.icon-btn-sm:hover,.icon-btn-sm.is-active{background:var(--color-black);color:var(--color-white)}.icon-btn-sm.is-active svg{display:block}.icon-btn-sm svg{display:block;width:14px;height:14px}.icon-btn-sm:focus-visible,.btn-sm:focus-visible,.btn:focus-visible,.tab:focus-visible,.pill:focus-visible,.modal-input:focus-visible,.settings-select:focus-visible{outline:3px solid var(--color-black);outline-offset:2px}.phone{max-width:428px;margin:24px auto 0;background:var(--color-white);border-radius:var(--radius-2);box-shadow:0 4px 24px #0000001a;overflow:hidden}.inner{padding:var(--space-4)}.toolbar{display:flex;justify-content:space-between;align-items:center;padding:var(--space-3) var(--space-4);margin-bottom:var(--space-4)}.brand{display:flex;align-items:center;gap:var(--space-2)}.logo{height:44px;width:auto}.toolbar .right{display:flex;align-items:flex-end;gap:var(--space-3);justify-content:flex-end}.settings-group{display:flex;flex-direction:column;gap:var(--space-1);align-items:flex-end}.settings-row{display:flex;align-items:center;gap:var(--space-1);justify-content:flex-end}.settings-label{font-size:10px;font-weight:var(--font-weight-semibold);color:var(--color-black);white-space:nowrap;min-width:35px}.settings-select{padding:2px var(--space-2);font-size:10px;border:var(--border-2) solid var(--color-black);border-radius:var(--radius-2);background:var(--color-white);color:var(--color-black);cursor:pointer;min-width:70px;flex:1}.floating-menu{position:fixed!important;top:24px!important;left:50%!important;right:auto!important;transform:translate(-50%)!important;display:flex!important;flex-direction:row!important;justify-content:center!important;align-items:center!important;gap:var(--space-2)!important;z-index:1000;margin:0!important;margin-bottom:var(--space-4)!important;max-width:428px!important;width:auto!important;padding:0!important;box-sizing:border-box}.floating-menu>*{margin-left:0!important;margin-right:0!important;flex-shrink:0;flex-grow:0}.tabs{display:flex;gap:var(--space-2);margin-bottom:var(--space-4)}.tab{flex:1;padding:var(--space-1) var(--space-4);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);border:var(--border-2) solid var(--color-black);border-radius:var(--radius-2);background:var(--color-white);color:var(--color-black);cursor:pointer;transition:all .2s ease;position:relative;white-space:nowrap;display:flex;align-items:center;justify-content:center}.tab:hover{color:var(--color-black)}.tab.is-active{border-color:var(--color-black);background:var(--color-black);color:var(--color-white);font-weight:var(--font-weight-bold)}.tab.community-requires-login{opacity:.6;position:relative}.tab.community-requires-login:hover{opacity:.8}.pills{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-bottom:var(--space-4)}.pill{flex:1;min-width:0;padding:var(--space-1) var(--space-3);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);border:var(--border-2) solid var(--color-black);border-radius:var(--radius-2);background:var(--color-white);color:var(--color-black);cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.pill:hover,.pill.is-active{background:var(--color-black);color:var(--color-white)}.controls{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-4)}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:flex-start;justify-content:center;z-index:2000;padding:var(--space-4);padding-top:60px;overflow-y:auto}.modal{background:var(--color-white);border:var(--border-2) solid var(--color-black);border-radius:var(--radius-2);max-width:430px;width:100%;max-height:calc(100vh - 80px);overflow-y:auto;padding:var(--space-4);position:relative;margin-top:0}.modal-small,.modal-medium,.modal-large{max-width:430px}.modal-full{max-width:430px;width:100%}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-4);padding-bottom:var(--space-3);border-bottom:var(--border-1) solid var(--color-black)}.modal-title{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);margin:0}.modal-input{width:100%;padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);border:var(--border-2) solid var(--color-black);border-radius:var(--radius-2);font-family:inherit;background:var(--color-white);transition:all .2s ease;box-sizing:border-box}.modal-input:focus{outline:none;border-color:var(--color-black);box-shadow:0 0 0 3px #0000001a}.modal-input::placeholder{color:#0006}.modal-content{background:var(--color-white);border:var(--border-2) solid var(--color-black);border-radius:var(--radius-2);max-width:430px;width:100%;max-height:calc(100vh - 80px);overflow-y:auto;padding:var(--space-4);position:relative;margin-top:0}.modal-body{margin-bottom:var(--space-4)}.modal-footer{display:flex;justify-content:flex-end;gap:var(--space-2);padding-top:var(--space-3);border-top:var(--border-1) solid var(--color-black)}.lesson-modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:flex-start;justify-content:center;z-index:2000;padding:var(--space-2);padding-top:60px;overflow-y:auto}.lesson-modal{background:var(--color-white);border:var(--border-2) solid var(--color-black);border-radius:var(--radius-2);max-width:430px;width:100%;max-height:calc(100vh - 80px);overflow-y:auto;padding:var(--space-4);position:relative;margin-top:0}.lesson-modal-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:var(--space-3)}.lesson-modal-title{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);margin:0;line-height:1.4}.lesson-modal-description{font-size:var(--font-size-sm);color:#000000b3;margin:var(--space-2) 0 var(--space-4)}.lesson-modal-footer{text-align:center;font-size:var(--font-size-xs);color:#00000080;margin-top:var(--space-4);padding-top:var(--space-3);border-top:var(--border-1) solid rgba(0,0,0,.1)}.chord-selector-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:flex-start;justify-content:center;z-index:2000;padding:var(--space-4);padding-top:60px;overflow-y:auto}.chord-selector-modal{background:var(--color-white);border:var(--border-2) solid var(--color-black);border-radius:var(--radius-2);max-width:430px;width:100%;max-height:calc(100vh - 80px);overflow-y:auto;padding:var(--space-2);position:relative;margin-top:0}.chord-selector-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-3);padding-bottom:var(--space-3);border-bottom:var(--border-1) solid var(--color-black)}.chord-selector-title{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);margin:0}.chord-selector-description{font-size:var(--font-size-sm);color:#000000b3;margin-bottom:var(--space-3)}.chord-selector-tabs{display:flex;gap:var(--space-2)}.chord-selector-tab{padding:var(--space-1) var(--space-3);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);border:var(--border-2) solid var(--color-black);border-radius:var(--radius-2);background:var(--color-white);color:var(--color-black);cursor:pointer;transition:all .2s ease}.chord-selector-tab:hover,.chord-selector-tab.is-active{background:var(--color-black);color:var(--color-white)}.chord-selector-search{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-2);border:var(--border-2) solid var(--color-black);border-radius:var(--radius-2);background:var(--color-white)}.chord-selector-search-icon{width:16px;height:16px;color:#00000080;flex-shrink:0}.chord-selector-search-input{border:none;outline:none;font-size:var(--font-size-sm);background:transparent;flex:1;min-width:0}.chord-selector-btn{padding:var(--space-2) var(--space-4);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);border:var(--border-2) solid var(--color-black);border-radius:var(--radius-2);background:var(--color-black);color:var(--color-white);cursor:pointer;transition:all .2s ease}.chord-selector-btn:hover:not(:disabled){opacity:.8}.chord-selector-btn:disabled{opacity:.5;cursor:not-allowed}.chord-selector-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-1);margin-top:var(--space-3);padding:0}.chord-selector-item{position:relative;display:flex;align-items:center;justify-content:center;width:100%;min-width:0;transition:transform .2s ease}.chord-selector-item:hover{transform:scale(1.05)}.chord-selector-item:hover .chord-selector-card{transform:scale(1)}.chord-selector-item:has(.chord-selector-card.active){transform:scale(.98)}.chord-selector-item:has(.chord-selector-card.active) .chord-selector-card{transform:scale(1)}.chord-selector-card{cursor:pointer;transition:all .2s ease;border:var(--border-2) solid var(--color-black);border-radius:var(--radius-2);background:var(--color-white);display:flex;align-items:center;justify-content:center;padding:0;box-sizing:border-box;width:100%;aspect-ratio:1 / 1;position:relative}.chord-selector-item:hover .chord-selector-card{box-shadow:0 4px 12px #00000026}.chord-selector-card.is-playing,.chord-selector-card.active{transform:scale(.98);box-shadow:inset 0 0 12px #00000040}.chord-selector-card .chord-card--fluid{border:none;background:transparent;width:100%;height:100%}.chord-selector-card .chord-card,.chord-selector-card svg{width:100%;height:100%}.chord-selector-empty{grid-column:1 / -1;text-align:center;padding:var(--space-8);color:#00000080;font-size:var(--font-size-sm)}.section-info-modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:flex-start;justify-content:center;z-index:2000;padding:var(--space-4);padding-top:60px;overflow-y:auto}.section-info-modal{background:var(--color-white);border:var(--border-2) solid var(--color-black);border-radius:var(--radius-2);max-width:430px;width:100%;max-height:calc(100vh - 80px);overflow-y:auto;padding:var(--space-4);position:relative;margin-top:0}.section-info-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-4);padding-bottom:var(--space-3);border-bottom:var(--border-1) solid var(--color-black)}.section-info-modal-title{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);margin:0}.section-info-modal-content{font-size:var(--font-size-sm);line-height:1.6}.section-info-btn{width:32px;height:32px;border-radius:var(--radius-2);border:none;background:transparent;color:var(--color-black);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;flex-shrink:0;transition:all .2s ease}.section-info-btn:hover{background:#0000001a}.section-info-btn:hover svg{opacity:.8}.section-info-btn svg{display:block;width:20px;height:20px}.chord-card{width:var(--chord-card-size);height:var(--chord-card-size);border:var(--chord-card-border);border-radius:var(--chord-card-radius);background:var(--color-white);display:flex;align-items:center;justify-content:center;position:relative}.chord-card--fluid{width:auto;height:auto;border:none;background:transparent}.chord-card--clickable{cursor:pointer;transition:all .2s ease}.chord-card--clickable:hover{transform:scale(1.05)}.composer-view{padding:0}.composer-description{font-size:var(--font-size-sm);line-height:1.6;color:#000000b3}.composer-controls{margin-bottom:var(--space-4)}.composer-tempo-label{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);margin-right:var(--space-2)}.composer-tempo-value{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);min-width:50px}.tempo-slider{-webkit-appearance:none;appearance:none;height:4px;background:var(--color-black);border-radius:var(--radius-full);outline:none}.tempo-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;background:var(--color-black);border-radius:50%;cursor:pointer}.tempo-slider::-moz-range-thumb{width:16px;height:16px;background:var(--color-black);border-radius:50%;cursor:pointer;border:none}.tempo-control{display:flex;align-items:center;gap:var(--space-2)}.tempo-label{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold)}.composer-time-signature-select{padding:var(--space-1) var(--space-2);font-size:10px;font-weight:var(--font-weight-semibold);border:var(--border-2) solid var(--color-black);border-radius:var(--radius-2);background:var(--color-white);color:var(--color-black);cursor:pointer;height:auto;min-width:70px}.composer-empty{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);padding:var(--space-8)}.composer-empty-card-placeholder{width:180px;height:180px;border:2px dashed rgba(0,0,0,.3);border-radius:var(--radius-2);background:transparent;display:flex;align-items:center;justify-content:center}.composer-empty p{text-align:center;color:#00000080;font-size:var(--font-size-sm);margin:0}.composer-main-card-container{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);margin-bottom:var(--space-4)}.composer-main-rhythm-dots{display:flex;gap:var(--space-1);justify-content:center;margin-bottom:-4px;margin-top:var(--space-2)}.composer-main-card{width:180px;height:180px;aspect-ratio:1 / 1;display:flex;align-items:center;justify-content:center;border:var(--border-2) solid var(--color-black);border-radius:var(--radius-2);background:var(--color-white);position:relative;transition:all .2s ease;cursor:pointer}.composer-main-card:hover{transform:scale(1.05);box-shadow:0 4px 12px #00000026}.composer-main-card>div{width:100%;height:100%;aspect-ratio:1 / 1}.composer-main-card .chord-card,.composer-main-card .chord-card--fluid,.composer-main-card .fingering,.composer-main-card .chord-card>svg{width:100%;height:100%;aspect-ratio:1 / 1}.composer-main-card.is-playing .chord-card,.composer-main-card .chord-card.active{box-shadow:none!important;transform:none!important}.composer-main-rest-symbol{width:100%;height:100%;display:flex;align-items:center;justify-content:center;aspect-ratio:1 / 1}.composer-main-rest-symbol svg{width:100%;height:100%}.composer-main-rest-symbol circle{fill:none;stroke:var(--color-black);stroke-width:2}.composer-rhythm-dot{width:8px;height:8px;border-radius:50%;background:var(--color-black);border:none;display:inline-block;transition:all .2s ease}@keyframes dotJump{0%{transform:translateY(0) scale(1)}50%{transform:translateY(-4px) scale(1.25)}to{transform:translateY(0) scale(1.2)}}.composer-rhythm-dot.is-active{background:var(--color-black);transform:scale(1.2);animation:dotJump .25s ease-out}.composer-timeline-container{margin-top:var(--space-4)}.composer-timeline{display:flex;gap:var(--space-2);overflow-x:auto;padding:var(--space-2) 0;scroll-behavior:smooth}.composer-timeline-item{position:relative;flex-shrink:0;cursor:pointer;transition:all .2s ease;background:transparent}.composer-timeline-item.is-selected{opacity:1}.composer-timeline-item.is-dragging{opacity:.5}.composer-timeline-item.is-drag-over{border:2px dashed var(--color-black)}.composer-timeline-item.is-playing .chord-card,.lesson-timeline-item.is-playing .chord-card{transform:scale(.98);box-shadow:inset 0 0 12px #00000040}.composer-timeline-rhythm-dots{display:flex;gap:2px;justify-content:center;margin-bottom:var(--space-1)}.composer-timeline-chord{width:103px;height:103px;aspect-ratio:1 / 1;display:flex;align-items:center;justify-content:center;border:var(--border-2) solid var(--color-black);border-radius:var(--radius-2);background:var(--color-white);position:relative}.composer-timeline-chord .chord-card,.composer-timeline-chord .chord-card--fluid,.composer-timeline-chord .fingering,.composer-timeline-chord .chord-card>svg{width:100%;height:100%;aspect-ratio:1 / 1}.composer-timeline-rest{width:100%;height:100%;display:flex;align-items:center;justify-content:center;aspect-ratio:1 / 1}.composer-timeline-beats-control{display:flex;gap:var(--space-1);justify-content:center;margin-top:var(--space-1);opacity:0;transition:opacity .2s ease}.composer-timeline-item:hover .composer-timeline-beats-control{opacity:1}.composer-beats-btn{width:24px;height:24px;padding:0;font-size:var(--font-size-sm);font-weight:var(--font-weight-bold);border:var(--border-2) solid var(--color-black);border-radius:50%;background:var(--color-white);color:var(--color-black);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.composer-beats-btn:hover:not(:disabled){background:var(--color-black);color:var(--color-white)}.composer-beats-btn:disabled{opacity:.3;cursor:not-allowed}.composer-timeline-duplicate-btn{position:absolute!important;inset:-8px auto auto -8px!important;width:24px;height:24px;padding:0;border:var(--border-2) solid var(--color-black);border-radius:50%;background:var(--color-white);color:var(--color-black);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease;z-index:11;transform:none}.composer-timeline-item:hover .composer-timeline-duplicate-btn{opacity:1}.composer-timeline-duplicate-btn:hover{background:var(--color-black);color:var(--color-white)}.composer-timeline-remove-btn{position:absolute;top:-8px;right:-8px;width:24px;height:24px;padding:0;font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);border:var(--border-2) solid var(--color-black);border-radius:50%;background:var(--color-white);color:var(--color-black);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease;z-index:10;line-height:1}.composer-timeline-item:hover .composer-timeline-remove-btn{opacity:1}.composer-timeline-remove-btn:hover{background:var(--color-black);color:var(--color-white)}.add-rest-icon{display:inline-flex;align-items:center}.lessons-timeline{display:flex;gap:var(--space-3);overflow-x:auto;padding:var(--space-2) 0;scroll-behavior:smooth;margin-top:var(--space-4)}.lesson-card{position:relative;flex-shrink:0;width:280px;height:340px;aspect-ratio:280 / 340;padding:var(--space-4);border:var(--border-2) solid var(--color-black);border-radius:var(--radius-2);background:var(--color-white);cursor:pointer;transition:all .2s ease;display:flex;flex-direction:column;overflow:hidden}.lesson-card:hover:not(.is-locked){transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.lesson-card.is-locked{opacity:.5;cursor:not-allowed;background:#0000000d}.lesson-card.is-completed{border-color:var(--color-black)}.lesson-lock-icon{position:absolute;top:var(--space-2);right:var(--space-2);width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:#00000080}.lesson-complete-icon{position:absolute;top:var(--space-2);left:var(--space-2);width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:var(--color-black)}.lesson-card-title{font-size:var(--font-size-base);font-weight:var(--font-weight-bold);margin:var(--space-3) 0 var(--space-2);line-height:1.3}.lesson-card-category{font-size:var(--font-size-xs);color:#0009;margin:0 0 var(--space-1);text-transform:uppercase;letter-spacing:.5px}.lesson-card-description{font-size:var(--font-size-sm);color:#000000b3;margin:0;line-height:1.4}.lesson-complete-btn{margin-top:var(--space-3);padding:var(--space-2) var(--space-4);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);border:var(--border-2) solid var(--color-black);border-radius:var(--radius-2);background:var(--color-white);color:var(--color-black);cursor:pointer;transition:all .2s ease;width:100%}.lesson-complete-btn:hover{background:var(--color-black);color:var(--color-white)}.section-title{font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);margin:0 0 var(--space-3);color:var(--color-black)}.section-desc{font-size:var(--font-size-sm);color:#000000b3;margin-bottom:var(--space-4);line-height:1.6}.guide-content{padding:0}.guide-block{border:var(--border-2) solid var(--color-black);border-radius:var(--radius-2);padding:calc(var(--space-4) + var(--space-1));margin-bottom:var(--space-4);background:var(--color-white)}.guide-block:last-child{margin-bottom:0}.guide-section-title{font-weight:var(--font-weight-bold);font-size:var(--font-size-base);margin-top:0;margin-bottom:var(--space-3);color:var(--color-black)}.guide-text{font-size:var(--font-size-sm);line-height:1.6;margin-bottom:var(--space-3);color:var(--color-black)}.guide-text:last-child{margin-bottom:0}.guide-list{font-size:var(--font-size-sm);line-height:1.6;margin-bottom:var(--space-3);padding-left:20px;color:var(--color-black);list-style-type:disc;list-style-position:outside}.guide-list:last-child{margin-bottom:0}.guide-list li{margin:0;margin-bottom:var(--space-1);padding:0 0 0 4px;line-height:1.6}.guide-diagrams{display:flex;flex-wrap:wrap;gap:var(--space-4);margin:var(--space-4) 0;justify-content:center}.guide-diagram-item{display:flex;flex-direction:column;align-items:center;gap:var(--space-2)}.guide-diagram-large{display:flex;justify-content:center;margin:var(--space-4) 0;overflow:visible}.guide-diagram-large .chord-card{overflow:visible;cursor:default!important;pointer-events:none}.guide-diagram-large .chord-card:hover{transform:none!important;box-shadow:none!important}.guide-diagram-large svg{overflow:visible;pointer-events:auto}.guide-diagram-label{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);color:#000000b3;text-align:center;margin:0}.guide-diagram-caption{font-size:var(--font-size-xs);color:#0009;text-align:center;font-style:italic;margin-top:var(--space-2)}.library-overlay{position:fixed;inset:0;background:#00000080;z-index:1500}.library-panel{position:fixed;top:60px;left:50%;transform:translate(-50%);width:430px;max-width:min(430px,calc(100vw - var(--space-4) * 2));max-height:calc(100vh - 80px);background:var(--color-white);border:var(--border-2) solid var(--color-black);border-radius:var(--radius-2);overflow-y:auto;z-index:1501;padding:var(--space-4);box-sizing:border-box}.panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-4);padding-bottom:var(--space-3);border-bottom:var(--border-2) solid var(--color-black)}.panel-title{font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);margin:0;letter-spacing:-.5px}.drone-overlay{position:fixed;inset:0;background:#00000080;z-index:2000}.drone-panel{position:fixed;top:60px;left:50%;transform:translate(-50%);background:var(--color-white);border:var(--border-2) solid var(--color-black);border-radius:var(--radius-2);width:430px;max-width:min(430px,calc(100vw - var(--space-4) * 2));max-height:calc(100vh - 80px);overflow-y:auto;padding:var(--space-4);box-sizing:border-box;z-index:2001}.drone-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-4);padding-bottom:var(--space-3);border-bottom:var(--border-1) solid var(--color-black)}.drone-title{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);margin:0}.drone-content{padding:0}.drone-section{margin-bottom:var(--space-4)}.drone-section:last-child{margin-bottom:0}.drone-label{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);margin-bottom:var(--space-2);display:block}.drone-description{font-size:var(--font-size-sm);color:#000000b3;margin-bottom:var(--space-2)}.drone-description-small{font-size:var(--font-size-xs);color:#0009;margin-top:var(--space-2);font-style:italic}.drone-description-text{font-size:var(--font-size-sm);color:#000000b3;line-height:1.6}.drone-instruments{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-bottom:var(--space-2)}.drone-select{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);border:var(--border-2) solid var(--color-black);border-radius:var(--radius-2);background:var(--color-white);color:var(--color-black);cursor:pointer;width:100%;margin-bottom:var(--space-2)}.drone-slider{-webkit-appearance:none;appearance:none;width:100%;height:4px;background:var(--color-black);border-radius:var(--radius-full);outline:none;margin:var(--space-2) 0}.drone-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;background:var(--color-black);border-radius:50%;cursor:pointer}.drone-slider::-moz-range-thumb{width:16px;height:16px;background:var(--color-black);border-radius:50%;cursor:pointer;border:none}.drone-slider-labels{display:flex;justify-content:space-between;font-size:var(--font-size-xs);color:#0009;margin-top:var(--space-1)}.drone-fine-tune-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-2)}.drone-fine-tune-value{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold)}.drone-tuning-toggle{display:flex;align-items:center;gap:var(--space-2);margin-top:var(--space-2)}.drone-error{padding:var(--space-2) var(--space-3);background:#ff00001a;border:var(--border-1) solid rgba(255,0,0,.3);border-radius:var(--radius-2);color:#f00c;font-size:var(--font-size-sm);margin-bottom:var(--space-3)}.drone-credit{text-align:center;font-size:var(--font-size-xs);color:#00000080;margin-top:var(--space-4);padding-top:var(--space-3);border-top:var(--border-1) solid rgba(0,0,0,.1)}.drone-credit-link{color:var(--color-black);text-decoration:underline}.video-item-landscape{margin-bottom:var(--space-4)}.video-embed-landscape{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border:var(--border-2) solid var(--color-black);border-radius:var(--radius-2)}.video-embed-landscape iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none}.video-shorts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-3);margin-top:var(--space-4)}.video-item-short{display:flex;flex-direction:column;gap:var(--space-2)}.video-title{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);margin:0;color:var(--color-black)}.video-embed-short{position:relative;padding-bottom:177.78%;height:0;overflow:hidden;border:var(--border-2) solid var(--color-black);border-radius:var(--radius-2)}.video-embed-short iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none}.video-placeholder{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#0000000d;color:#00000080;font-size:var(--font-size-sm)}.caption{font-size:var(--font-size-xs);color:#00000080;text-align:center;margin-top:var(--space-2)}.community-view{padding:0}.community-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--space-2);margin-top:var(--space-3)}.community-card{border:var(--border-2) solid var(--color-black);border-radius:var(--radius-2);padding:var(--space-2);background:var(--color-white);display:flex;flex-direction:column;gap:var(--space-2)}.community-card-header{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-1)}.community-card-title{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-black);margin:0;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.community-card-author{font-size:10px;color:#00000080;margin:2px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.community-favorite-btn{background:transparent;border:none;border-radius:var(--radius-2);cursor:pointer;padding:4px;display:flex;align-items:center;gap:2px;color:#0006;transition:all .2s ease;flex-shrink:0;min-width:24px;height:24px}.community-favorite-btn:hover{color:#000000b3}.community-favorite-btn.is-favorited{color:var(--color-black)}.community-favorite-btn.disabled{cursor:not-allowed;opacity:.4}.community-favorite-btn.disabled:hover{color:#0006}.community-favorite-btn svg{width:16px;height:16px;flex-shrink:0;display:block}.community-favorite-count{font-size:10px;font-weight:var(--font-weight-semibold);line-height:1;display:inline-block}.community-card-info{min-height:auto}.community-card-actions{display:flex;gap:var(--space-1);flex-wrap:wrap;width:100%;justify-content:flex-start;align-items:center;margin-top:var(--space-1)}.community-card-actions .btn-sm{flex:0 0 auto;min-width:fit-content;max-width:none;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;padding:3px 8px;font-size:10px;line-height:1.3;overflow:visible;text-overflow:clip}.community-card-actions .btn-sm svg{flex-shrink:0;width:12px;height:12px;margin-right:3px}.community-player-modal{background:var(--color-white);border:var(--border-2) solid var(--color-black);border-radius:var(--radius-2);max-width:430px;width:95%;max-height:calc(100vh - 80px);overflow-y:auto;padding:var(--space-4);position:relative;margin:0 auto}.community-player-modal-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-2);margin-bottom:var(--space-4)}.community-player-modal-title{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--color-black);margin:0;line-height:1.4;display:flex;align-items:center;gap:8px}.community-player-modal-content{margin-bottom:var(--space-4)}.community-player-main-card-container{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);margin-bottom:var(--space-4)}.community-player-rhythm-dots{display:flex;gap:var(--space-1);justify-content:center;margin-bottom:var(--space-2)}.community-player-main-card{width:180px;height:180px;aspect-ratio:1 / 1;display:flex;align-items:center;justify-content:center;border:var(--border-2) solid var(--color-black);border-radius:var(--radius-2);background:var(--color-white);position:relative;padding:0}.community-player-main-card>div{width:100%;height:100%;aspect-ratio:1 / 1;display:flex;align-items:center;justify-content:center}.community-player-main-card .chord-card,.community-player-main-card .chord-card--fluid,.community-player-main-card .fingering{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.community-player-main-card svg{width:100%;height:100%}.community-player-timeline-container{width:100%;overflow-x:auto;margin-top:var(--space-3);padding-bottom:var(--space-2)}.community-player-timeline{display:flex;gap:var(--space-2);align-items:flex-start;padding:var(--space-2) 0;min-width:fit-content}.community-preview-timeline-item{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);min-width:80px}.community-preview-timeline-item.is-playing{background:transparent}.community-preview-timeline-item.is-playing .composer-timeline-chord{transform:scale(.98);box-shadow:inset 0 0 12px #00000040}.composer-timeline-rhythm-dots{display:flex;gap:4px;justify-content:center;margin-bottom:var(--space-1)}.composer-timeline-chord{width:80px;height:80px;aspect-ratio:1 / 1;display:flex;align-items:center;justify-content:center;border:var(--border-2) solid var(--color-black);border-radius:var(--radius-2);background:var(--color-white);position:relative;transition:all .2s ease}.composer-timeline-chord>div{width:100%;height:100%;aspect-ratio:1 / 1}.composer-timeline-rest{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:var(--font-size-xl);color:#0000004d;border:none;background:transparent}.composer-timeline-rest svg{width:100%;height:100%}.composer-timeline-rest circle{fill:none;stroke:var(--color-black);stroke-width:2}.community-player-modal-actions{display:flex!important;flex-direction:row!important;gap:var(--space-2);justify-content:space-between;padding-top:var(--space-3);border-top:var(--border-1) solid rgba(0,0,0,.1);align-items:stretch}.community-player-modal-actions .btn{padding:var(--space-1) var(--space-2)!important;font-size:var(--font-size-xs)!important;flex:1 1 0!important;min-width:0;display:flex!important;flex-direction:row!important;align-items:center;justify-content:center;white-space:nowrap;height:auto;margin:0}@media(max-width:640px){.community-player-modal{max-width:100%;width:100%;margin:0;padding:var(--space-3);max-height:100vh;border-radius:0}.community-player-main-card{width:150px;height:150px}.composer-timeline-chord,.composer-timeline-rest{width:60px;height:60px}.community-preview-timeline-item{min-width:60px}.community-player-modal-actions{flex-direction:row!important;gap:var(--space-1)}.community-player-modal-actions .btn{flex:1;min-width:0;padding:var(--space-1) var(--space-1);font-size:10px!important}}.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4);margin-top:var(--space-4);align-items:center;justify-items:center}.grid>*{width:100%;max-width:180px;aspect-ratio:1 / 1;display:flex;justify-content:center;align-items:center;position:relative}.grid .chord-card{border:var(--border-2) solid var(--color-black);border-radius:var(--radius-2);background:var(--color-white);transition:all .2s ease;cursor:pointer;width:100%;height:100%;aspect-ratio:1 / 1;display:flex;justify-content:center;align-items:center;position:relative;box-sizing:border-box}.grid .chord-card .chord-card--fluid{border:none;background:transparent}.grid .chord-card .chord-card--fluid,.grid .chord-card svg{width:100%;height:100%;max-width:100%;max-height:100%}.grid .chord-card:hover{transform:scale(1.05);box-shadow:0 4px 12px #00000026}.grid .chord-card.active{transform:scale(.98);box-shadow:inset 0 0 12px #00000040}.grid--show-me{grid-template-columns:1fr;justify-items:center}.grid--show-me>*{max-width:400px}.library-chords-grid .chord-card{border:var(--border-2) solid var(--color-black);border-radius:var(--radius-2);background:var(--color-white);transition:all .2s ease;cursor:pointer;position:relative;aspect-ratio:1 / 1;display:flex;justify-content:center;align-items:center;box-sizing:border-box;width:160px;height:160px}.library-chords-grid .chord-card .chord-card--fluid{border:none;background:transparent;width:100%;height:100%}.library-chords-grid .chord-card svg{width:100%;height:100%}.library-chords-grid .chord-card:hover{transform:scale(1.05);box-shadow:0 4px 12px #00000026}.library-chords-grid .chord-card.active{transform:scale(.98);box-shadow:inset 0 0 12px #00000040}@media(max-width:640px){.icon-btn-sm{width:36px;height:36px;min-width:36px;min-height:36px}.icon-btn-sm svg{width:18px;height:18px}.floating-menu{top:var(--space-2);left:50%;transform:translate(-50%);justify-content:center!important;align-items:center!important;margin:0!important;margin-bottom:var(--space-4)!important;max-width:428px;width:auto;padding:0!important;box-sizing:border-box}.lesson-modal-overlay{padding:var(--space-2);padding-top:44px}.lesson-modal{max-height:calc(100vh - 60px);padding:var(--space-3);width:calc(100% - var(--space-2));margin-top:0}.composer-main-card,.composer-empty-card-placeholder{width:150px;height:150px}.composer-timeline-chord{width:80px;height:80px}.library-panel{top:44px;width:min(430px,calc(100vw - var(--space-4) * 2));max-width:min(430px,calc(100vw - var(--space-4) * 2));max-height:calc(100vh - 60px)}.modal-overlay{padding-top:44px}.modal-content,.modal{max-height:calc(100vh - 60px);margin-top:0}.chord-selector-overlay{padding-top:44px}.chord-selector-modal{max-height:calc(100vh - 60px);padding:var(--space-3);margin-top:0}.section-info-modal{max-height:calc(100vh - 60px);padding:var(--space-3);width:calc(100% - var(--space-2));margin-top:0}.section-info-modal-overlay{padding:var(--space-2);padding-top:44px}.community-player-modal{max-height:calc(100vh - 60px);margin-top:0}.drone-panel{top:44px;max-width:min(430px,calc(100vw - var(--space-4) * 2));max-height:calc(100vh - 60px);padding:var(--space-3);width:min(430px,calc(100vw - var(--space-4) * 2))}.drone-overlay{padding:var(--space-2)}.community-grid{grid-template-columns:1fr;gap:var(--space-2)}.community-card{padding:var(--space-2);gap:var(--space-2)}.lessons-timeline{gap:var(--space-2)}.lesson-card{width:220px;height:260px}}.fingering{display:block;width:100%;height:100%;max-width:100%;max-height:100%}.fingering circle{stroke:var(--color-black);stroke-width:2px}.fingering circle[data-open=true]{fill:var(--hole-fill-open, white)}.fingering circle[data-open=false]{fill:var(--hole-fill-closed, black)}.fingering text{text-anchor:middle;dominant-baseline:middle}.fingering text[data-finger-label]{fill:#000!important;opacity:1!important;visibility:visible!important;pointer-events:none}.fg-label{fill:var(--color-black);font-family:var(--font-sans)}.fg-root{font-size:10px;font-weight:700}.fg-val{font-size:12px;font-weight:700;line-height:1}.fg-sub{font-size:10px;font-weight:600}.fg-finger{font-size:10px!important;font-weight:700!important;fill:#000!important;font-family:system-ui,-apple-system,sans-serif!important;opacity:1!important}:root{--bg: #ffffff;--fg: #000000;--fg2: #6b6b6b;--border: #000000;--bg2: #f3f3f3;--outer: #e8e8e8;--r: 8px;--max: 460px;--font: "Be Vietnam Pro", system-ui, sans-serif;--top: 52px;--bot: calc(62px + env(safe-area-inset-bottom, 0px)) }*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;font-family:var(--font);background:var(--outer);color:var(--fg);-webkit-font-smoothing:antialiased}#root{height:100%;background:var(--outer)}button{cursor:pointer;border:none;background:none;font-family:inherit;color:inherit}ul{list-style:none}a{color:inherit}.app-shell{max-width:var(--max);margin:0 auto;min-height:100vh;position:relative;background:var(--bg);box-shadow:0 0 24px #0000001a}.app-main{padding-top:var(--top);padding-bottom:var(--bot);min-height:100vh}.top-bar{position:fixed;top:0;left:50%;transform:translate(-50%);width:100%;max-width:var(--max);height:var(--top);background:var(--bg);border-bottom:2px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 14px;z-index:200}.top-brand{display:flex;align-items:center;gap:9px}.top-hub-link{color:var(--fg3);font-size:16px;text-decoration:none;padding:4px 6px 4px 0;line-height:1;opacity:.7;transition:opacity .15s}.top-hub-link:hover{opacity:1}.top-brand-logo{height:32px;width:32px;object-fit:contain;border-radius:4px}.top-brand-text{display:flex;flex-direction:column;line-height:1.15}.top-brand-title{font-size:14px;font-weight:700;letter-spacing:.06em}.top-brand-sub{font-size:11px;font-weight:500;color:var(--fg2);letter-spacing:.03em}.top-controls{display:flex;gap:6px}.top-variant-toggle{display:flex;gap:4px;background:var(--bg2);border-radius:99px;padding:3px}.top-variant-btn{border:none;background:transparent;border-radius:99px;padding:3px 10px;font-size:11px;font-weight:700;color:var(--fg2);cursor:pointer;transition:background .12s,color .12s;letter-spacing:.04em}.top-variant-btn.active{background:var(--fg);color:var(--bg)}.top-select{border:2px solid var(--border);border-radius:99px;padding:3px 26px 3px 10px;font-size:12px;font-weight:700;font-family:var(--font);background:var(--bg);color:var(--fg);cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23000' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center}.settings-panel{position:fixed;top:var(--top);left:50%;transform:translate(-50%);width:100%;max-width:var(--max);background:var(--bg);border-bottom:2px solid var(--border);padding:16px 14px;z-index:190;box-shadow:0 4px 16px #00000014}.settings-title{font-size:15px;font-weight:700;margin-bottom:12px}.settings-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--fg2);display:block;margin:12px 0 6px}.settings-group{margin-bottom:8px}.settings-size{font-size:10px;color:var(--fg2);display:block;margin-bottom:4px}.settings-row{display:flex;flex-wrap:wrap;gap:6px}.settings-keys{display:flex;flex-direction:column;gap:4px}.settings-key-btn{border:2px solid var(--border);border-radius:var(--r);padding:5px 12px;font-size:13px;font-weight:700;transition:.12s}.settings-key-btn.active,.settings-key-btn:hover{background:var(--fg);color:var(--bg)}.settings-select{width:100%;border:2px solid var(--border);border-radius:var(--r);padding:8px 32px 8px 12px;font-size:13px;font-weight:700;font-family:var(--font);background:var(--bg);color:var(--fg);cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}.settings-close{margin-top:14px;width:100%;border:2px solid var(--border);border-radius:99px;padding:8px;font-weight:700;font-size:13px;transition:.12s}.settings-close:hover{background:var(--fg);color:var(--bg)}.tab-bar{position:fixed;bottom:0;left:50%;transform:translate(-50%);width:100%;max-width:var(--max);height:var(--bot);padding-bottom:env(safe-area-inset-bottom,0px);background:var(--bg);border-top:2px solid var(--border);display:flex;z-index:200}.tab-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;margin:5px 5px 12px;border:2px solid var(--fg);border-radius:12px;background:var(--bg);color:var(--fg);font-size:9px;font-weight:700;transition:background .12s,color .12s}.tab-btn.active{background:var(--fg);color:var(--bg)}.tab-label{font-size:9px}.ks-wrap{display:flex;flex-direction:column;align-items:center;padding:52px 20px 32px;min-height:100vh;text-align:center}.ks-logo{margin-bottom:16px}.ks-logo-img{width:72px;height:72px;object-fit:contain;border-radius:12px}.ks-title{font-size:44px;font-weight:700;letter-spacing:.14em}.ks-sub{font-size:13px;color:var(--fg2);margin-top:2px}.ks-hint{font-size:13px;color:var(--fg2);margin:24px 0 8px}.ks-group{width:100%;max-width:340px;margin-bottom:16px}.ks-select{width:100%;border:2px solid var(--border);border-radius:var(--r);padding:12px 36px 12px 14px;font-size:15px;font-weight:700;font-family:var(--font);background:var(--bg);color:var(--fg);cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}.ks-footer{margin-top:36px;font-size:11px;color:var(--fg2)}.app-footer{text-align:center;padding:20px 0 8px;font-size:11px}.app-footer a{color:var(--fg2);text-decoration:none;letter-spacing:.04em}.app-footer a:hover{text-decoration:underline}.page{padding:16px 14px}.page-title{font-size:22px;font-weight:700;margin-bottom:3px}.page-sub{font-size:12px;color:var(--fg2);margin-bottom:18px}.gen-options{display:flex;flex-direction:column;gap:14px;margin-bottom:18px}.gen-option-group{display:flex;flex-direction:column;gap:7px}.gen-option-label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fg2)}.gen-pills{display:flex;flex-wrap:wrap;gap:6px}.gen-pill{padding:6px 14px;font-size:13px;font-weight:600;border:1.5px solid var(--fg2);border-radius:99px;background:transparent;color:var(--fg2);cursor:pointer;transition:.12s}.gen-pill.active{background:var(--fg);border-color:var(--fg);color:var(--bg)}.gen-pill:active{opacity:.7}.generate-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:100%;padding:13px 18px;margin-bottom:14px;background:var(--fg);border:2px solid var(--fg);border-radius:99px;cursor:pointer;text-align:center}.generate-btn:active{opacity:.7}.generate-btn-icon{font-size:16px;line-height:1;color:var(--bg);position:relative;top:1px}.generate-btn-label{font-size:15px;font-weight:700;color:var(--bg)}.generate-btn-sub{font-size:11px;color:var(--bg);opacity:.75}.regen-btn{padding:8px 14px;border-radius:99px;border:1.5px solid var(--fg2);background:var(--bg);font-size:14px;font-weight:600;cursor:pointer;color:var(--fg)}.regen-btn:active{opacity:.7}.save-img-btn{padding:8px 14px;border-radius:99px;border:1.5px solid var(--fg2);background:var(--bg);font-size:13px;font-weight:600;cursor:pointer;color:var(--fg2);margin-left:auto}.save-img-btn:active{opacity:.7}.song-capture{background:var(--bg)}.song-capture .capture-header,.song-capture .capture-footer{display:none}.song-capture.exporting .capture-header,.song-capture.exporting .capture-footer{display:flex;align-items:center;justify-content:center;gap:8px}.song-capture.exporting .capture-header{padding:12px 0 6px}.song-capture.exporting .capture-footer{padding:6px 0 12px}.capture-brand{display:flex;align-items:center;gap:8px}.capture-logo{width:36px;height:36px;object-fit:contain;border-radius:4px}.capture-brand-text{display:flex;flex-direction:column;gap:1px}.capture-brand-name{font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--fg);line-height:1.2}.capture-brand-sub{font-size:10px;color:var(--fg2);letter-spacing:.03em;line-height:1.2}.capture-url{font-size:11px;color:var(--fg2);letter-spacing:.03em}.song-list{display:flex;flex-direction:column;gap:6px}.song-row{display:flex;align-items:center;gap:12px;border:2px solid var(--border);border-radius:var(--r);padding:11px 13px;text-align:left;width:100%;transition:.12s}.song-row:hover{background:var(--bg2)}.song-num{width:26px;height:26px;border-radius:50%;background:var(--fg);color:var(--bg);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}.song-info{display:flex;flex-direction:column}.song-name{font-weight:600;font-size:14px}.song-meta{font-size:11px;color:var(--fg2)}.back-btn{font-size:13px;font-weight:600;color:var(--fg2);margin-bottom:12px;display:inline-block}.song-header{margin-bottom:14px}.song-detail-title{font-size:19px;font-weight:700}.song-detail-meta{font-size:11px;color:var(--fg2)}.controls-row{display:flex;align-items:center;gap:12px;margin-bottom:14px}.ctrl-btn{border:2px solid var(--border);border-radius:99px;padding:7px 16px;font-weight:700;font-size:13px;display:inline-flex;align-items:center;gap:4px;white-space:nowrap;transition:background .12s,color .12s}.ctrl-btn:hover,.ctrl-btn.active{background:var(--fg);color:var(--bg)}.save-img-btn{margin-left:auto}.tempo-slider-row{display:flex;align-items:center;gap:10px;padding:6px 0 2px}.tempo-slider-label{font-size:11px;font-weight:700;color:var(--fg2);white-space:nowrap}.tempo-slider{flex:1;height:4px;accent-color:var(--fg);cursor:pointer}.tempo-slider-bpm{font-size:11px;font-weight:700;color:var(--fg);white-space:nowrap;min-width:52px;text-align:right}.note-row{display:flex;flex-wrap:wrap;gap:6px;padding:4px 0}.note-cell{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 5px 10px;transition:background .08s,transform .08s;text-align:center;cursor:pointer;border-radius:var(--r)}.note-cell:hover{background:var(--bg2)}.note-cell.playing{background:var(--bg2);transform:scale(.96);box-shadow:0 2px 8px #00000026}.dur-dots{display:flex;gap:3px;align-items:center;justify-content:center;margin-top:2px;min-height:8px}.dur-dot{width:6px;height:6px;border-radius:50%;background:var(--fg2);flex-shrink:0;transition:transform .15s,background .15s}.dur-dot--eighth{width:8px;height:3px;border-radius:2px}.note-cell.playing .dur-dot{background:var(--fg);animation:dot-swell var(--bd, .5s) ease-in-out var(--del, 0ms) 1 both}@keyframes dot-swell{0%{transform:scale(1)}25%{transform:scale(2)}65%{transform:scale(1)}to{transform:scale(1)}}.note-cell.bar-start{border-left:2px solid rgba(0,0,0,.18);margin-left:5px;padding-left:3px}.note-legend{margin-top:10px}.note-hint{font-size:11px;color:var(--fg2);margin-bottom:6px}.dur-legend{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.dur-legend-label{font-size:11px;font-weight:700;color:var(--fg2)}.dur-legend-item{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10px;color:var(--fg2)}.fingering-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:20px}.fc-card{display:flex;flex-direction:column;align-items:center;gap:6px;border:2px solid var(--border);border-radius:var(--r);padding:10px 8px 14px;transition:background .08s,transform .08s,box-shadow .08s;text-align:center;box-shadow:0 2px 6px #0000001a}.fc-card--active{background:#f0f0f0;transform:scale(.96);box-shadow:0 1px 2px #00000014}.fc-info{display:flex;flex-direction:column;gap:1px}.fc-notename{font-size:15px;font-weight:700}.fc-interval{font-size:10px;color:var(--fg2)}.fc-tip{font-size:9px;color:var(--fg2);margin-top:2px}.legend-card{border:2px solid var(--border);border-radius:var(--r);padding:14px;margin-bottom:16px}.legend-symbols{display:flex;gap:24px;justify-content:center;margin-bottom:16px}.legend-symbol-item{display:flex;flex-direction:column;align-items:center;gap:4px}.legend-symbol-label{font-size:12px;font-weight:600}.dot{border-radius:50%;border:2px solid var(--fg);flex-shrink:0;display:inline-block}.dot.filled{background:var(--fg)}.dot.open{background:var(--bg)}.dot.lg{width:28px;height:28px}.legend-row .dot{width:14px;height:14px}.legend-diagram{display:flex;flex-direction:column;align-items:center;margin-bottom:12px;position:relative}.legend-ann{font-size:11px;font-weight:700}.legend-ann--top{margin-bottom:4px}.legend-ann--bottom{margin-top:4px}.legend-diagram-row{display:flex;align-items:flex-start;gap:6px}.legend-ann-side{display:flex;align-items:center;gap:3px}.legend-left-col{display:flex;flex-direction:column;align-items:flex-end}.legend-thumb-label{display:flex;align-items:center;gap:4px;margin-top:12px}.legend-ann-bottom{display:flex;flex-direction:column;align-items:flex-start;width:100%;margin-top:4px;padding-left:20px;gap:2px}.legend-ann-line{display:flex;align-items:center;gap:4px}.legend-dash{font-size:11px;color:var(--fg2)}.scale-row{margin-top:10px;font-size:13px;font-weight:600}.prac-card{border:2px solid var(--border);border-radius:var(--r);padding:14px;margin-bottom:10px}.prac-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}.prac-label{font-weight:700;font-size:15px}.prac-val{font-weight:700;font-size:18px;margin-left:auto}.prac-desc{font-size:12px;color:var(--fg2);margin-bottom:10px}.tick-dot{width:10px;height:10px;border-radius:50%;background:var(--bg2);transition:.08s;margin-left:6px}.tick-dot.on{background:var(--fg)}.bpm-slider{width:100%;-webkit-appearance:none;appearance:none;height:5px;background:var(--bg2);border-radius:3px;outline:none;margin-bottom:12px}.bpm-slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--fg);cursor:pointer}.prac-btn{width:100%;border:2px solid var(--border);border-radius:99px;padding:9px;font-size:14px;font-weight:700;transition:.12s}.prac-btn:hover,.prac-btn.active{background:var(--fg);color:var(--bg)}.drone-error-inline{font-size:12px;font-weight:700;color:var(--fg);margin-bottom:8px}.drone-row{display:flex;align-items:center;gap:10px;margin-bottom:8px}.drone-row--col{flex-direction:column;align-items:stretch}.drone-row-label{font-size:12px;font-weight:600;color:var(--fg2);min-width:70px}.drone-pills{display:flex;gap:6px}.drone-pill{font-size:12px;font-weight:600;padding:5px 14px;border-radius:99px;border:2px solid var(--border);background:var(--bg);color:var(--fg);cursor:pointer;transition:.12s}.drone-pill.active{background:var(--fg);color:var(--bg)}.drone-inst-desc{font-size:11px;color:var(--fg2);margin:0 0 12px}.drone-finetune-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}.drone-finetune-val{font-size:13px;font-weight:700;color:var(--fg)}.drone-slider-labels{display:flex;justify-content:space-between;font-size:10px;color:var(--fg2);margin-top:2px;margin-bottom:12px}.drone-credit{font-size:10px;color:var(--fg2);margin-top:10px;text-align:center}.drone-credit a{color:var(--fg2)}.video-embed{position:relative;width:100%;padding-top:56.25%;border-radius:10px;overflow:hidden;background:#000}.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:none}.tips h3{font-size:14px;margin-bottom:8px}.tips ul{padding-left:16px;list-style:disc}.tips li{font-size:13px;color:var(--fg2);margin-bottom:4px}.info-card{border:2px solid var(--border);border-radius:var(--r);padding:14px;margin-bottom:10px}.info-card h3{font-size:14px;font-weight:700;margin-bottom:8px}.info-card p{font-size:13px;color:var(--fg2);margin-bottom:5px}.info-card ul{padding-left:16px;list-style:disc}.info-card li{font-size:13px;color:var(--fg2);margin-bottom:3px}.scale-display{font-size:15px;font-weight:700;color:var(--fg);margin:6px 0}.site-link{font-weight:700;text-decoration:underline;font-size:13px}.export-wrap{position:relative;margin-left:auto}.export-dropdown{position:absolute;right:0;top:calc(100% + 6px);background:var(--bg);border:2px solid var(--border);border-radius:10px;min-width:180px;z-index:100;overflow:hidden}.export-dropdown button{display:block;width:100%;padding:10px 14px;text-align:left;font-size:13px;font-weight:600;border-bottom:1px solid var(--bg2)}.export-dropdown button:last-child{border-bottom:none}.export-dropdown button:hover{background:var(--bg2)}.playlist-msg{font-size:11px;color:var(--fg);font-weight:700;margin-left:8px}.staff-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:8px 0;color:var(--fg)}.staff-wrap svg{display:block;max-width:none}.playlist-section{margin-top:16px}.playlist-section-title{font-size:11px;font-weight:700;color:var(--fg2);letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px}.playlist-item{display:flex;align-items:center;gap:8px;padding:10px 12px;border:2px solid var(--border);border-radius:10px;margin-bottom:6px;cursor:pointer;transition:background .12s}.playlist-item:hover{background:var(--bg2)}.playlist-item-info{flex:1;min-width:0}.playlist-item-title{font-size:13px;font-weight:700}.playlist-item-meta{font-size:10px;color:var(--fg2);margin-top:1px}.playlist-item-del{padding:8px;color:var(--fg2);flex-shrink:0;display:flex;align-items:center}.playlist-item-del:hover{color:var(--fg)}.zen-mode-toggle{display:flex;gap:6px;margin-bottom:18px}.zen-mode-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 14px;border:2px solid var(--border);border-radius:99px;font-size:13px;font-weight:700;transition:.12s}.zen-mode-btn.active{background:var(--fg);color:var(--bg)}.zen-session{display:flex;flex-direction:column;gap:0;animation:zen-reveal .7s cubic-bezier(.22,.61,.36,1) both}@keyframes zen-reveal{0%{opacity:0;transform:translateY(14px);filter:blur(2px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}.zen-card-header{margin-bottom:16px}.zen-card-category{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px;display:block}.zen-card-title{font-size:20px;font-weight:700;margin-bottom:6px}.zen-card-desc{font-size:14px;color:var(--fg2);line-height:1.5}.zen-focus{display:flex;flex-direction:column;align-items:center;gap:0;margin-bottom:24px;border:2px solid var(--border);border-radius:var(--r);padding:16px 14px}.zen-card-active-diagram{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:12px;padding:10px}@keyframes diagram-fade-in{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.zen-diagram-preview{opacity:.35;transition:opacity .4s ease}@keyframes tap-ring{0%{transform:scale(1);opacity:.65}to{transform:scale(3.2);opacity:0}}.tap-ring-anim{animation:tap-ring .38s cubic-bezier(.22,.61,.36,1) forwards;transform-box:fill-box;transform-origin:center;pointer-events:none}.tap-guide-wrap{position:relative;width:100%;height:28px;margin-top:4px}.zen-card-active-label{font-size:16px;font-weight:700;color:var(--fg)}.bg-wrap{width:100%;padding:4px 0 0}.bg-header{display:flex;align-items:center;justify-content:center;gap:8px;position:relative;width:100%}.bg-icons{position:absolute;right:0;display:flex;gap:2px;align-items:center}.bg-sound-icon{color:var(--fg2);padding:4px;display:flex;align-items:center}.bg-sound-icon:hover{color:var(--fg)}.bg-show-btn{width:100%;border:1.5px solid var(--fg2);border-radius:99px;padding:8px;font-size:12px;font-weight:600;color:var(--fg2);margin-bottom:14px;transition:.12s}.bg-show-btn:hover{background:var(--bg2)}.bg-phase{text-align:center;margin-bottom:10px;transition:opacity .3s}.bg-phase-text{font-size:18px;font-weight:700;letter-spacing:.02em}.bg-phase-text{color:var(--fg2)}.bg-bar-track{height:8px;background:var(--bg2);border-radius:4px;overflow:hidden}.bg-bar-fill{height:100%;border-radius:4px}.bg-bar-fill{background:#888}.bg-note{display:block;font-size:14px;font-weight:700;color:var(--fg);margin-top:2px;transition:opacity .2s}.zen-timer-row{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:4px}.zen-timer-header{display:flex;align-items:center;justify-content:space-between}.zen-timer-value{font-size:13px;font-weight:700;color:var(--fg)}.zen-timer-select{border:1.5px solid var(--fg2);border-radius:99px;padding:4px 24px 4px 10px;font-size:11px;font-weight:600;font-family:var(--font);background:var(--bg);color:var(--fg2);cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M1 1l3 3 3-3' stroke='%236b6b6b' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center}.zen-transport-toggle{display:flex;align-items:center;justify-content:center;gap:4px;margin:6px auto 0;padding:4px 12px;border-radius:20px;border:1px solid var(--color-border);background:transparent;color:var(--fg2);font-size:11px;cursor:pointer;opacity:.7;transition:opacity .15s}.zen-transport-toggle:hover{opacity:1}.zen-timer-display{font-size:18px;font-weight:700;color:var(--fg2);font-variant-numeric:tabular-nums}.zen-timer-done{font-size:12px}.zen-options-bottom{border-top:1px solid var(--bg2);padding-top:16px;display:flex;flex-direction:column;gap:12px}.zen-option-row{display:flex;flex-direction:column;gap:6px}.zen-option-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--fg2)}.gen-pill-sm{padding:4px 10px;font-size:11px}.zen-volume-row{display:flex;align-items:center;gap:10px}.zen-sound-toggle{border:1.5px solid var(--fg2);border-radius:99px;padding:3px 10px;font-size:10px;font-weight:700;min-width:36px;text-align:center;color:var(--fg2);transition:.12s}.zen-sound-toggle.muted{background:var(--bg2);color:var(--fg2)}.zen-new-card-btn{display:flex;align-items:center;justify-content:center;gap:6px;padding:10px;border:1.5px solid var(--fg2);border-radius:99px;font-size:13px;font-weight:600;color:var(--fg2);transition:.12s}.zen-new-card-btn:hover{background:var(--bg2)}.zen-hero-text{font-size:16px;font-weight:600;font-style:italic;color:var(--fg2);margin-bottom:20px;line-height:1.5}.zen-pitch-card{text-align:center}.zen-pitch-hint{font-size:12px;color:var(--fg2);font-style:italic;margin-bottom:14px}.zen-pitch-slider-wrap{display:flex;align-items:center;gap:10px;margin-bottom:6px}.zen-pitch-label{font-size:11px;font-weight:700;color:var(--fg2);white-space:nowrap}.zen-pitch-freq{font-size:13px;font-weight:700;color:var(--fg);margin-bottom:10px}.zen-pitch-play{border:2px solid var(--border);border-radius:99px;padding:8px 20px;font-size:13px;font-weight:700;transition:.12s}.zen-pitch-play:hover{background:var(--fg);color:var(--bg)}.melody-session{display:flex;flex-direction:column;gap:0;animation:zen-reveal .7s cubic-bezier(.22,.61,.36,1) both}.melody-score{display:flex;gap:6px;overflow-x:auto;padding:8px 0 14px;scrollbar-width:none}.melody-score::-webkit-scrollbar{display:none}.melody-score-note{display:flex;flex-direction:column;align-items:center;gap:3px;flex-shrink:0;padding:5px 4px 4px;border-radius:10px;border:2px solid transparent;background:transparent;cursor:pointer;transition:border-color .15s,opacity .15s}.melody-score-note.active{border-color:var(--fg);background:var(--bg2)}.melody-score-note.done{opacity:.3}.melody-score-name{font-size:9px;font-weight:700;color:var(--fg2);line-height:1}.melody-score-note.active .melody-score-name{color:var(--fg)}.melody-active{display:flex;flex-direction:column;align-items:center;gap:6px;padding:20px 0;border:2px solid var(--border);border-radius:var(--r);margin-bottom:20px}.melody-active-name{font-size:28px;font-weight:700;line-height:1}.melody-active-label{font-size:12px;color:var(--fg2);text-transform:uppercase;letter-spacing:.06em;font-weight:600}.melody-controls{display:flex;flex-direction:column;gap:14px;align-items:center}.melody-step-row{display:flex;align-items:center;gap:18px}.melody-step-btn{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--border);background:var(--bg);color:var(--fg);display:flex;align-items:center;justify-content:center;cursor:pointer}.melody-play-btn{width:52px;height:52px;border-radius:50%;border:none;background:var(--fg);color:var(--bg);display:flex;align-items:center;justify-content:center;cursor:pointer}.melody-pos{font-size:15px;font-weight:600;min-width:44px;text-align:center;color:var(--fg2)}.zen-video-card{padding:16px}.zen-video-wrap{position:relative;width:100%;padding-bottom:56.25%;height:0;margin-top:10px;border-radius:8px;overflow:hidden}.zen-video-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none}.zen-calibration-card{display:flex;flex-direction:column;gap:10px}.zen-calibration-hint{font-size:13px;color:var(--fg2);line-height:1.5}.zen-calibration-row{display:flex;align-items:center;gap:8px}.zen-calibration-row .bpm-slider{flex:1}.zen-calibration-value{font-size:13px;font-weight:600;text-align:center;color:var(--fg2)}.start-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:40px 24px 32px;text-align:center;gap:40px}.start-header{display:flex;flex-direction:column;align-items:center;gap:6px}.start-logo{width:72px;height:72px;border-radius:16px;object-fit:cover;margin-bottom:10px}.start-title{font-size:26px;font-weight:800;letter-spacing:-.5px}.start-brand{font-size:15px;font-weight:600;color:var(--fg2);letter-spacing:.5px}.start-hint{margin-top:12px;font-size:14px;color:var(--fg2)}.start-options{display:flex;flex-direction:column;gap:12px;width:100%;max-width:320px}.start-option-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:20px 16px;border:2px solid var(--border);border-radius:var(--r);background:var(--bg);cursor:pointer;transition:background .15s}.start-option-btn:hover,.start-option-btn:active{background:var(--bg2)}.start-option-name{font-size:20px;font-weight:700;letter-spacing:-.3px}.start-option-desc,.start-footer{font-size:12px;color:var(--fg2)}.zen-fingering-grid{grid-template-columns:repeat(3,1fr)}@media(max-width:380px){.zen-fingering-grid{grid-template-columns:repeat(2,1fr)}}