: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)}.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}.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}}.audio-unlock-prompt{position:fixed;bottom:0;left:0;right:0;z-index:9998;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) var(--space-4);padding-bottom:max(var(--space-3),env(safe-area-inset-bottom));background:#141418f2;color:#f5f5f5;border-top:1px solid rgba(255,255,255,.12);box-shadow:0 -4px 24px #0003}.audio-unlock-prompt__text{flex:1;min-width:min(100%,240px);margin:0;font-size:var(--font-size-sm);line-height:1.45}.audio-unlock-prompt__btn{flex-shrink:0;white-space:nowrap}