:root{--wood-dark: #2d1b15;--wood-light: #5d4037;--sidebar-bg: #1a1a1a;--active-color: #ff9800;--safe-left: env(safe-area-inset-left);--safe-right: env(safe-area-inset-right);--safe-top: env(safe-area-inset-top);--safe-bottom: env(safe-area-inset-bottom)}*{box-sizing:border-box;user-select:none;-webkit-user-select:none;touch-action:none;-webkit-tap-highlight-color:transparent}body{margin:0;padding:0;background:#000;position:fixed;inset:0;height:100dvh;width:100vw;overflow:hidden;overscroll-behavior:none;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;display:flex;flex-direction:column}#rotate-message{display:none}#main-app{display:flex;flex-direction:row;width:100%;height:100%;padding-left:var(--safe-left);padding-right:var(--safe-right);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transition:width .3s,height .3s,transform .3s,padding .3s;overflow:hidden;background:#000}@media screen and (orientation:portrait){#main-app{width:100dvh;height:100vw;transform:translate(-50%,-50%) rotate(90deg);padding-left:calc(30px + var(--safe-top));padding-right:var(--safe-bottom)}#chord-bar{width:clamp(140px,25vh,240px)!important}#settings-trigger{left:calc(20px + var(--safe-top))!important;top:20px!important}}#guitar-body{flex:1;background:radial-gradient(circle at 40% 50%,var(--wood-light) 0%,var(--wood-dark) 60%,#000 95%);position:relative;display:flex;flex-direction:column;overflow:hidden}#sound-hole{position:absolute;top:50%;left:-20%;transform:translateY(-50%);height:90%;aspect-ratio:1/1;background:#100805;border-radius:50%;border:6px solid #4e342e;box-shadow:inset 0 0 50px #000;z-index:0}#settings-trigger{position:absolute;top:calc(15px + var(--safe-top));left:calc(15px + var(--safe-left));width:44px;height:44px;background:#0009;border:1px solid #555;border-radius:50%;color:#fff;font-size:1.4rem;display:flex;justify-content:center;align-items:center;z-index:100;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);box-shadow:0 2px 5px #00000080}#strings-container{z-index:10;display:flex;flex-direction:column;justify-content:space-between;padding:4vh 0;height:100%;width:100%}.string{position:relative;width:100%;height:40px;display:flex;align-items:center}.string-line{width:100%;box-shadow:0 3px 6px #000c;transition:transform .05s}.s0 .string-line{height:4.5px;background:#ffb74d}.s1 .string-line{height:3.8px;background:#ffb74d}.s2 .string-line{height:3.2px;background:#ffb74d}.s3 .string-line{height:2.5px;background:#ffb74d}.s4 .string-line{height:1.5px;background:#cfd8dc}.s5 .string-line{height:1px;background:#cfd8dc}.vibrating .string-line{animation:vibrate .15s linear infinite}@keyframes vibrate{0%{transform:translateY(0)}50%{transform:translateY(2px)}to{transform:translateY(0)}}#chord-bar{width:clamp(110px,28vw,220px);min-width:110px;height:100%;background:var(--sidebar-bg);border-left:2px solid #333;display:flex;flex-wrap:wrap;align-content:flex-start;justify-content:center;gap:8px;padding:10px 8px;padding-right:calc(8px + var(--safe-right));overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;z-index:20;box-shadow:-5px 0 15px #0009}.chord-btn{flex:1 0 50px;aspect-ratio:1/1;max-width:80px;border-radius:50%;border:2px solid #444;background:linear-gradient(145deg,#2a2a2a,#1a1a1a);color:#ddd;font-size:clamp(.8rem,2.5vh,1.1rem);font-weight:700;display:flex;justify-content:center;align-items:center;box-shadow:0 4px 6px #0006;word-break:break-all;transition:transform .1s}.chord-btn.active{background:var(--active-color);color:#2d1b15;border-color:var(--active-color);transform:scale(1.05);z-index:2}.many-chords .chord-btn{aspect-ratio:auto;border-radius:12px;height:45px;flex-basis:30%;max-width:none}.many-chords .chord-btn.active{transform:scale(1.02)}.chord-btn.add-btn{background:transparent;border:1px dashed #555;color:#888;font-size:1.5rem;flex-basis:40px;max-width:40px;height:40px;aspect-ratio:1/1;border-radius:50%;margin:0 auto}#settings-modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#000000f2;z-index:2000;flex-direction:column;align-items:center;touch-action:pan-y;-webkit-overflow-scrolling:touch;padding:40px var(--safe-right) 40px var(--safe-left);overflow-y:auto;overscroll-behavior:contain}#settings-modal *{touch-action:pan-y}.modal-content{width:100%;max-width:800px;padding-bottom:80px}.modal-header{display:flex;justify-content:space-between;border-bottom:1px solid #333;padding-bottom:10px;margin-bottom:15px}.modal-title{color:#fff;font-size:1.2rem;font-weight:700}.close-icon{font-size:1.5rem;color:#888;cursor:pointer;padding:0 10px}.tabs-header{display:flex;gap:10px;margin-bottom:20px;border-bottom:2px solid #222}.tab-btn{flex:1;background:none;border:none;color:#888;padding:10px;font-size:1rem;font-weight:700;cursor:pointer;transition:color .2s;position:relative}.tab-btn.active{color:var(--active-color)}.tab-btn.active:after{content:"";position:absolute;bottom:-2px;left:0;width:100%;height:2px;background:var(--active-color)}.tab-content{animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.settings-row{display:flex;flex-direction:column;gap:20px;margin-bottom:20px}@media(min-width:600px){.settings-row{flex-direction:row;gap:40px}.setting-group{flex:1}}.settings-row.compact{flex-direction:row;justify-content:space-between;gap:15px;margin-bottom:15px;background:#151515;padding:10px 15px;border-radius:8px;border:1px solid #2a2a2a}.settings-row.compact .setting-group{flex:unset;display:flex;flex-direction:column;align-items:center}.compact-label{margin-top:0;margin-bottom:6px;font-size:.7rem;color:#888}.setting-label{color:var(--active-color);font-size:.8rem;text-transform:uppercase;margin-bottom:8px;margin-top:15px}.sound-options{display:flex;gap:8px}.sound-btn{flex:1;padding:10px;background:#222;border:1px solid #444;color:#aaa;border-radius:6px;font-size:.8rem;cursor:pointer}.sound-btn.selected{background:var(--active-color);color:#000;font-weight:700}.sound-options.compact-controls{background:#1a1a1a;border-radius:20px;padding:4px;border:1px solid #333;gap:0;display:flex}.sound-btn.compact-btn{background:transparent;border:none;color:#888;padding:6px 16px;border-radius:16px;font-size:.8rem;font-weight:700;transition:all .2s;height:auto}.sound-btn.compact-btn.selected{background:#333;color:var(--active-color);box-shadow:0 2px 5px #00000080}.chord-library-container{background:#111;padding:15px;border-radius:8px;border:1px solid #2a2a2a;margin-bottom:15px}.library-header{margin-bottom:10px}.chord-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:6px}.lib-btn{aspect-ratio:1/1;background:#222;border:1px solid #444;color:#fff;border-radius:5px;font-size:.8rem}.lib-btn.added{border-color:var(--active-color);color:var(--active-color);background:#331f00}.lib-btn.sharp{color:#ffab91;border-color:#5d4037}.lib-btn.minor{font-size:.85rem}.action-btn{width:100%;padding:12px;background:#333;color:var(--active-color);border:1px solid #555;border-radius:8px;font-size:.9rem;font-weight:700;margin-bottom:15px;cursor:pointer}.action-btn.save-preset-btn{background:#1a1a1a;margin-bottom:0}#preset-list{display:flex;flex-direction:column;gap:8px;max-height:300px;overflow-y:auto;background:#111;padding:10px;border-radius:8px;border:1px solid #333}.preset-item{display:flex;justify-content:space-between;align-items:center;background:#222;border:1px solid #444;border-radius:6px;padding:12px;transition:background .2s}.preset-item:hover{background:#2a2a2a;border-color:#555}.preset-item:active{background:#333}.preset-name{color:#ccc;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;margin-right:10px;cursor:pointer}.preset-del{background:transparent;border:none;color:#666;font-size:1.5rem;line-height:1;padding:0 10px;cursor:pointer}.capo-controls{display:flex;justify-content:center;gap:20px;background:#222;padding:10px;border-radius:8px;border:1px solid #444;align-items:center}.capo-btn{width:40px;height:40px;background:#333;border:1px solid #555;color:#fff;border-radius:50%;font-size:1.5rem;cursor:pointer;display:flex;align-items:center;justify-content:center}#capo-display{color:var(--active-color);font-size:1.5rem;font-weight:700;min-width:30px;text-align:center}.capo-controls.compact-controls{background:#1a1a1a;border-radius:24px;padding:4px;gap:0;border:1px solid #333;display:flex;align-items:center}.capo-btn.compact-btn{width:32px;height:32px;background:transparent;border:none;font-size:1.4rem;color:#888;padding:0;transition:color .2s}.capo-btn.compact-btn:hover{color:var(--active-color)}#capo-display.compact-display{font-size:1rem;min-width:36px;color:#ddd}#start-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000eb;color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.app-title{margin-bottom:5px;color:var(--active-color)}.subtitle{color:#aaa;font-size:.9rem;margin-bottom:25px}.overlay-options{width:250px;margin-bottom:25px}#start-btn{background:var(--active-color);padding:16px 64px;background:linear-gradient(135deg,var(--active-color),#f57c00);border:none;border-radius:40px;font-weight:800;color:#111;font-size:1.3rem;cursor:pointer;box-shadow:0 10px 20px #ff98004d,inset 0 2px #fff6;transition:all .3s cubic-bezier(.175,.885,.32,1.275);letter-spacing:1px}#start-btn:hover{transform:scale(1.05) translateY(-5px);box-shadow:0 15px 25px #ff980066,inset 0 2px #ffffff80}#start-btn:active{transform:scale(.95);box-shadow:0 5px 10px #ff98004d}.app-links{margin-top:50px;display:flex;flex-direction:column;gap:12px}.app-link-btn{background:#ffffff08;border:1px solid rgba(255,255,255,.1);color:#888;padding:12px 24px;border-radius:24px;font-size:.9rem;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);transition:all .2s;cursor:not-allowed}.fade-in{opacity:0;animation:fadeIn 1s ease forwards .3s}.pulse-btn{opacity:0;animation:fadeIn 1s ease forwards .6s,pulseIdle 2s infinite 1.6s}.fade-in-delayed{opacity:0;animation:fadeIn 1s ease forwards .9s}@keyframes pulseIdle{0%,to{box-shadow:0 10px 20px #ff98004d,inset 0 2px #fff6}50%{box-shadow:0 10px 30px #ff980080,inset 0 2px #fff6}}