*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%}body{background:#0d0d0f;color:#e4e4e8;font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,Helvetica Neue,Arial,sans-serif;-webkit-font-smoothing:antialiased;overflow-y:auto;touch-action:manipulation}.app{min-height:100svh;display:flex;align-items:center;justify-content:center;padding:max(20px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}.card{position:relative;background:#18181c;border:1px solid #2c2c34;border-radius:28px;padding:36px 28px 28px;width:100%;max-width:420px;box-shadow:0 8px 40px #0009}.lang-select-wrapper{position:absolute;top:16px;right:20px;z-index:10}.lang-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#26262e;border:1px solid #3a3a44;border-radius:8px;color:#888;font-size:.65rem;font-weight:700;letter-spacing:.06em;padding:4px 22px 4px 8px;cursor:pointer;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='M0 0l5 6 5-6z' fill='%2355555f'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 6px center;background-size:8px}.lang-select:focus{outline:none;border-color:#ff6b35;color:#ff6b35}.card__title{font-size:4rem;font-weight:900;letter-spacing:.06em;color:#ff6b35;text-align:center;line-height:1;margin-bottom:4px}.card__subtitle{text-align:center;font-size:1rem;font-weight:600;letter-spacing:.18em;color:#888;margin-bottom:28px}.card__sub{text-align:center;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:#55555f;margin-top:6px;margin-bottom:36px}.btn-enable{display:block;width:100%;min-height:76px;padding:20px 24px;background:#ff6b35;color:#fff;border:none;border-radius:18px;font-size:1.15rem;font-weight:700;letter-spacing:.04em;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:0 0 36px #ff6b3559;transition:transform .1s ease,box-shadow .1s ease}.btn-enable:active{transform:scale(.96);box-shadow:0 0 16px #ff6b3533}.loading{display:flex;flex-direction:column;align-items:center;gap:18px;padding:20px 0 12px}.spinner{width:44px;height:44px;border:3px solid #2c2c34;border-top-color:#ff6b35;border-radius:50%;animation:spin .75s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading__text{color:#666;font-size:.85rem;letter-spacing:.12em;text-transform:uppercase}.sequencer-section{margin-bottom:20px;padding:14px 16px;border:1px solid #2c2c34;border-radius:16px;background:#141418}.pattern-grid{overflow:hidden}.track-row{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid #22222a}.track-row:last-child{border-bottom:none}.track-label{width:54px;font-size:.65rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#55555f;flex-shrink:0;transition:color .15s ease}.track-label--active{color:#ff6b35}.track-row--clickable{cursor:pointer;transition:background .1s ease}.track-row--clickable:active{background:#ffffff0a}.step-cells{display:flex;gap:3px;flex:1}.step-cells--editable{cursor:pointer}.bar-selector{display:flex;gap:4px;padding:6px 14px 4px;border-bottom:1px solid #22222a}.bar-btn{flex:1;height:28px;border-radius:5px;background:#2a2a32;color:#666;border:1px solid #3a3a44;font-size:.65rem;font-weight:700;cursor:pointer}.bar-btn--active{background:#3a3aff;border-color:#3a3aff;color:#fff}.bar-btn--playing{outline:2px solid #ff6b35;outline-offset:1px}.beat-chord-row{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:4px 14px 0}.beat-chip-wrap{position:relative}.beat-chord-chip{width:100%;height:28px;border-radius:5px;background:#2a2a32;color:#666;border:1px solid #3a3a44;font-size:.6rem;font-weight:700;letter-spacing:.02em;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;transition:background .12s ease,border-color .12s ease,color .12s ease}.beat-chord-chip--on{background:#ff6b35;border-color:#ff6b35;color:#fff;box-shadow:0 0 6px #ff6b3566}.beat-chord-chip:active{transform:scale(.93)}.guitar-wheel{position:absolute;top:calc(100% + 6px);z-index:100;width:110px;background:#1a1a20;border:1px solid #3a3a44;border-radius:14px;overflow:hidden;box-shadow:0 10px 32px #000000bf}.guitar-wheel--left{left:0}.guitar-wheel--right{right:0}.guitar-wheel__col{position:relative;overflow:hidden;height:132px}.step-editor{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;padding:8px 14px 12px;background:#0f0f13;border-bottom:1px solid #22222a}.step-btn{height:44px;border-radius:6px;border:1px solid #3a3a44;background:#26262e;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;transition:background .1s ease,border-color .1s ease,transform .08s ease;font-size:.6rem;font-weight:700;color:#55555f;display:flex;align-items:center;justify-content:center}.step-btn--on{background:#ff6b35;border-color:#ff6b35;box-shadow:0 0 6px #ff6b3566;color:#fff}.step-btn--playing{outline:2px solid rgba(255,255,255,.45);outline-offset:-2px}.step-btn--on.step-btn--playing{outline:2px solid rgba(255,255,255,.6);outline-offset:-2px;box-shadow:0 0 6px #ff6b3566,0 0 12px #ff6b354d}.step-btn:active{transform:scale(.82)}.track-volume-row{display:flex;align-items:center;gap:10px;padding:8px 14px 12px;background:#0f0f13;border-bottom:1px solid #22222a}.track-volume-label{font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#55555f;width:28px;flex-shrink:0}.track-volume-value{font-size:.65rem;font-weight:700;font-variant-numeric:tabular-nums;color:#ff6b35;min-width:2.4em;text-align:right;flex-shrink:0}.track-volume-slider{flex:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:4px;border-radius:2px;background:linear-gradient(to right,#ff6b35 calc(var(--vol-pct, 100) * 1%),#2c2c34 calc(var(--vol-pct, 100) * 1%));outline:none;cursor:pointer}.track-volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#ff6b35;box-shadow:0 0 0 3px #ff6b3540;cursor:pointer;transition:box-shadow .1s ease}.track-volume-slider:active::-webkit-slider-thumb{box-shadow:0 0 0 6px #ff6b354d}.cell{flex:1;height:10px;border-radius:3px;background:#26262e}.cell:nth-child(4n+1){margin-left:4px}.cell:nth-child(1){margin-left:0}.cell--active{background:#ff6b35}.cell--dim{background:#7a3520}.cell--playing{outline:2px solid rgba(255,255,255,.45);outline-offset:-1px}.section-title-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.section-title-row .progression-section-title{margin-bottom:0}.btn-help{width:22px;height:22px;border-radius:50%;border:1px solid #3a3a44;background:#26262e;color:#55555f;font-size:.72rem;font-weight:800;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:border-color .15s ease,color .15s ease}.btn-help:active{border-color:#ff6b35;color:#ff6b35}.help-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:199;background:#0000008c}.help-modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:200;width:min(88vw,380px);max-height:75vh;background:#1e1e26;border:1px solid #3a3a44;border-radius:18px;display:flex;flex-direction:column;box-shadow:0 16px 48px #000000b3;overflow:hidden}.help-modal__header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 12px;border-bottom:1px solid #2c2c34;flex-shrink:0}.help-modal__title{font-size:.85rem;font-weight:800;letter-spacing:.06em;color:#ff6b35}.help-modal__close{width:28px;height:28px;border-radius:50%;border:1px solid #3a3a44;background:#26262e;color:#888;font-size:.75rem;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;display:flex;align-items:center;justify-content:center;flex-shrink:0}.help-modal__close:active{background:#ff6b35;border-color:#ff6b35;color:#fff}.help-modal__body{overflow-y:auto;padding:14px 18px 20px;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:14px}.help-modal__item{border-left:2px solid #ff6b35;padding-left:12px}.help-modal__heading{font-size:.75rem;font-weight:700;color:#e4e4e8;margin-bottom:4px;letter-spacing:.02em}.help-modal__text{font-size:.7rem;color:#888;line-height:1.6;letter-spacing:.02em}.bpm-section{margin-bottom:20px;padding:14px 16px;border:1px solid #2c2c34;border-radius:16px;background:#141418}.bpm-control{display:grid;grid-template-columns:44px 1fr 44px;grid-template-rows:auto auto;align-items:center;gap:16px 10px}.btn-bpm{grid-row:1;width:44px;height:44px;border:1px solid #3a3a44;border-radius:10px;background:#26262e;color:#e4e4e8;font-size:1.3rem;font-weight:300;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;display:flex;align-items:center;justify-content:center;transition:transform .1s ease}.btn-bpm:active{transform:scale(.88);background:#ff6b35;color:#fff;border-color:#ff6b35}.bpm-display{grid-row:1;display:flex;flex-direction:column;align-items:center;line-height:1;gap:2px}.bpm-value{font-size:1.9rem;font-weight:800;color:#ff6b35;font-variant-numeric:tabular-nums}.bpm-unit{font-size:.6rem;font-weight:600;letter-spacing:.2em;color:#55555f;text-transform:uppercase}.bpm-slider{grid-column:1 / -1;grid-row:2;-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:4px;border-radius:2px;background:linear-gradient(to right,#ff6b35 calc((var(--bpm-pct, 42.86)) * 1%),#2c2c34 calc((var(--bpm-pct, 42.86)) * 1%));outline:none;cursor:pointer}.bpm-slider::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:#ff6b35;box-shadow:0 0 0 3px #ff6b3540;cursor:pointer;transition:box-shadow .1s ease}.bpm-slider:active::-webkit-slider-thumb{box-shadow:0 0 0 6px #ff6b354d}.controls{display:flex;gap:12px;margin-bottom:20px}.btn-play,.btn-stop{flex:1;min-height:68px;border:none;border-radius:16px;font-size:1.05rem;font-weight:700;letter-spacing:.06em;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;transition:transform .1s ease,opacity .1s ease}.btn-play{background:#ff6b35;color:#fff;box-shadow:0 0 24px #ff6b354d}.btn-stop{background:#26262e;color:#b0b0bc;border:1px solid #3a3a44}.btn-play:active,.btn-stop:active{transform:scale(.95)}.btn-play:disabled,.btn-stop:disabled{opacity:.3;cursor:default;transform:none;box-shadow:none}.humanize-section{margin-bottom:20px;padding:14px 16px;border:1px solid #2c2c34;border-radius:16px;background:#141418}.btn-humanize{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;border:1px solid #3a3a44;border-radius:12px;background:#26262e;color:#66666f;font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;transition:background .15s ease,border-color .15s ease,color .15s ease}.btn-humanize--on{background:#ff6b351f;border-color:#ff6b35;color:#ff6b35}.btn-humanize:active{transform:scale(.97)}.humanize-dot{width:8px;height:8px;border-radius:50%;background:#3a3a44;flex-shrink:0;transition:background .15s ease}.btn-humanize--on .humanize-dot{background:#ff6b35;box-shadow:0 0 6px #ff6b35b3;animation:blink 1.2s ease-in-out infinite}.humanize-badge{font-size:.65rem;font-weight:800;letter-spacing:.1em;padding:2px 6px;border-radius:4px;background:#3a3a44;color:#55555f;transition:background .15s ease,color .15s ease}.btn-humanize--on .humanize-badge{background:#ff6b35;color:#fff}.humanize-ms{font-size:.6rem;font-weight:700;letter-spacing:.06em;color:#ff6b35b3;margin-left:-4px}.status{text-align:center;font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase}.status--playing{color:#4ade80}.status--playing:before{content:"● ";animation:blink 1s ease-in-out infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}.status--stopped{color:#44444c}.status--stopped:before{content:"○ "}.style-section{margin-bottom:16px;padding:14px 16px;border:1px solid #2c2c34;border-radius:16px;background:#141418}.style-buttons{display:flex;gap:5px;flex-wrap:wrap;justify-content:center}.btn-style{padding:4px 12px;border:1px solid #3a3a44;border-radius:8px;background:#26262e;color:#66666f;font-size:.68rem;font-weight:700;letter-spacing:.08em;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;transition:background .15s ease,border-color .15s ease,color .15s ease}.btn-style--active{background:#7b8fff26;border-color:#7b8fff;color:#7b8fff}.btn-style:active{transform:scale(.92)}.prog-item{display:flex;flex-direction:column;gap:8px;margin-bottom:0}.prog-item-label{display:block;text-align:center;font-size:.6rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#55555f}.prog-divider{border:none;border-top:1px solid #2c2c34;margin:12px 0}.key-select-wrapper{position:relative;width:100%}.key-current{width:100%;display:flex;align-items:center;gap:6px;padding:6px 10px;background:#26262e;border:1px solid #3a3a44;border-radius:8px;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;transition:border-color .15s ease}.key-current:active{border-color:#7b8fff}.key-current-label{font-size:.8rem;font-weight:700;letter-spacing:.04em;color:#e4e4e8;flex:1;text-align:center}.key-current-arrow{color:#55555f;font-size:.7rem;flex-shrink:0}.key-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:99}.key-options{position:absolute;top:calc(100% + 4px);right:0;z-index:100;background:#1e1e24;border:1px solid #3a3a44;border-radius:10px;overflow:hidden;box-shadow:0 8px 24px #0009;min-width:80px}.key-option{width:100%;padding:9px 16px;background:none;border:none;border-bottom:1px solid #2a2a32;color:#66666f;font-size:.8rem;font-weight:700;letter-spacing:.04em;cursor:pointer;text-align:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;transition:background .1s ease,color .1s ease}.key-option:last-child{border-bottom:none}.key-option--active{background:#7b8fff1f;color:#7b8fff}.key-option:active:not(.key-option--unavailable){background:#7b8fff33}.key-option--unavailable{opacity:.4;cursor:not-allowed}.key-option-note{font-size:.58rem;font-weight:600;color:#44444c}.progression-section{margin-bottom:20px;padding:14px 16px;border:1px solid #2c2c34;border-radius:16px;background:#141418}.progression-section-title{margin:0 0 12px;font-size:11px;font-weight:700;letter-spacing:.12em;color:#888;text-transform:uppercase;text-align:left}.section-label{font-size:.6rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#55555f;flex-shrink:0}.progression-select-wrapper{position:relative;flex:1}.progression-current{width:100%;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;background:#26262e;border:1px solid #3a3a44;border-radius:8px;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;transition:border-color .15s ease}.progression-current:active{border-color:#ff6b35}.prog-current-label{font-size:.75rem;font-weight:700;letter-spacing:.03em;color:#e4e4e8}.prog-current-arrow{color:#55555f;font-size:.75rem;flex-shrink:0}.progression-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:99}.progression-options{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:100;background:#1e1e24;border:1px solid #3a3a44;border-radius:10px;overflow:hidden;box-shadow:0 8px 24px #0009}.progression-option{width:100%;padding:10px 14px;background:none;border:none;border-bottom:1px solid #2a2a32;color:#66666f;font-size:.75rem;font-weight:700;letter-spacing:.03em;cursor:pointer;text-align:left;-webkit-appearance:none;-moz-appearance:none;appearance:none;transition:background .1s ease,color .1s ease}.progression-option:last-child{border-bottom:none}.progression-option-degrees{margin-left:6px;font-size:.65rem;font-weight:600;opacity:.5;letter-spacing:.04em}.progression-option--active{background:#ff6b351f;color:#ff6b35}.progression-option:active{background:#ff6b3533}.changes-section{border-top:1px solid #2c2c34;padding-top:12px;margin-top:12px}.changes-section-header{display:flex;align-items:center;justify-content:center;gap:10px}.btn-reset-changes{padding:2px 8px;border:1px solid #3a3a44;border-radius:6px;background:none;color:#55555f;font-size:.58rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;transition:border-color .1s ease,color .1s ease}.btn-reset-changes:active{border-color:#7b8fff;color:#7b8fff}.chord-display{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:8px}.chord-chip-wrapper{position:relative;min-width:0}.chord-chip{width:100%;min-height:48px;display:flex;align-items:center;justify-content:center;text-align:center;padding:4px 2px;border-radius:8px;background:#1e1e26;border:1px solid #2c2c34;font-size:clamp(.52rem,2vw,.7rem);font-weight:700;color:#7a7a90;letter-spacing:0;white-space:normal;overflow-wrap:break-word;line-height:1.3;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;transition:background .12s ease,color .12s ease,border-color .12s ease}.chord-chip:active{transform:scale(.93)}.chord-chip--overridden{border-color:#7b8fff;color:#a0a8ff;background:#7b8fff14}.chord-chip--current{background:#ff6b352e;border-color:#ff6b35;color:#ff6b35;box-shadow:0 0 10px #ff6b3538}.chord-chip-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:99}.chord-wheel{position:absolute;top:calc(100% + 6px);z-index:100;width:210px;display:flex;flex-direction:column;background:#1a1a20;border:1px solid #3a3a44;border-radius:14px;overflow:hidden;box-shadow:0 10px 32px #000000bf}.chord-wheel--left{left:0}.chord-wheel--right{right:0}.chord-wheel__header{display:flex;align-items:center;border-bottom:1px solid #2c2c34;flex-shrink:0}.chord-wheel__col-label{flex:1;text-align:center;padding:6px 0 5px;font-size:.55rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#55555f}.chord-wheel__body{display:flex;height:132px}.chord-wheel__divider-v{width:1px;background:#2c2c34;flex-shrink:0}.chord-wheel__col{flex:1;position:relative;overflow:hidden}.chord-wheel__track{height:100%;overflow-y:scroll;scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}.chord-wheel__track::-webkit-scrollbar{display:none}.chord-wheel__pad{height:44px}.chord-wheel__item{height:44px;scroll-snap-align:center;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;color:#30303a;letter-spacing:.03em}.chord-wheel__item--active{color:#e4e4e8;font-size:1rem}.chord-wheel__indicator{position:absolute;top:50%;left:0;right:0;height:44px;transform:translateY(-50%);border-top:1px solid #3a3a44;border-bottom:1px solid #3a3a44;background:#ff6b3512;pointer-events:none;z-index:1}.chord-wheel__fade{position:absolute;left:0;right:0;height:48px;pointer-events:none;z-index:2}.chord-wheel__fade--top{top:0;background:linear-gradient(to bottom,#1a1a20 25%,transparent)}.chord-wheel__fade--bottom{bottom:0;background:linear-gradient(to top,#1a1a20 25%,transparent)}.count-in{text-align:center;margin-bottom:12px;animation:countPulse .12s ease-out}.count-beat{font-size:3.2rem;font-weight:800;color:#ff6b35;font-variant-numeric:tabular-nums;line-height:1;text-shadow:0 0 24px rgba(255,107,53,.5)}@keyframes countPulse{0%{transform:scale(1.5);opacity:.5}to{transform:scale(1);opacity:1}}.bar-indicator{margin-top:8px;text-align:center;font-size:.62rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#44444c;font-variant-numeric:tabular-nums}