:root{--paper:#f5f2eb;--white:#fff;--ink:#242620;--muted:#77796f;--line:#dedbd2;--green:#2e7657;--mint:#d8ede2;--amber:#e9a84c;--wood:#49392c}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;overflow-x:hidden;background:var(--paper);color:var(--ink);font-family:var(--font-body),sans-serif;-webkit-tap-highlight-color:transparent}button,a{color:inherit;font:inherit}button{cursor:pointer}a{text-decoration:none}.site-header{height:72px;padding:0 max(24px,5vw);display:flex;align-items:center;justify-content:space-between;background:#ffffffeb;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display),sans-serif;font-size:21px;font-weight:600;letter-spacing:.02em}.brand-pick{width:29px;height:34px;display:grid;place-items:center;background:var(--green);color:#fff;font-size:19px;clip-path:polygon(50% 0,95% 28%,82% 88%,50% 100%,18% 88%,5% 28%)}.site-header nav{display:flex;align-items:center;gap:30px;color:#686a62;font-size:12px}.site-header nav a:hover{color:var(--green)}.audio-ready{padding:8px 12px;border:1px solid var(--line);border-radius:20px;text-transform:uppercase;letter-spacing:.08em;font-size:9px}.audio-ready i{display:inline-block;width:6px;height:6px;margin-right:7px;border-radius:50%;background:#50a274;box-shadow:0 0 0 3px #50a2741c}.instrument-section{width:100%;min-width:0;padding:60px max(24px,5vw) 86px}.title-row{width:100%;min-width:0;max-width:1360px;margin:0 auto 34px;display:flex;align-items:flex-end;justify-content:space-between;gap:40px}.kicker{margin:0 0 9px;color:var(--green);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.15em}h1{margin:0;font:600 clamp(47px,5vw,70px)/.95 var(--font-display),sans-serif;letter-spacing:-.025em}.lede{max-width:360px;margin:0 0 4px;color:var(--muted);font-size:13px;line-height:1.65}.guitar-app{width:100%;min-width:0;max-width:1360px;margin:auto;overflow:visible;border:1px solid #d5d2c9;border-radius:14px;background:#fff;box-shadow:0 24px 60px #2f2b2217}.toolbar{min-width:0;min-height:68px;padding:12px 14px;display:flex;align-items:center;gap:5px;border-bottom:1px solid var(--line)}.toolbar>button,.dropdown-control>button,.recording-controls button,.download-control{height:41px;padding:0 14px;border:1px solid transparent;border-radius:8px;background:transparent;color:#55584f;font-size:12px}.toolbar button span{margin-right:7px;color:var(--green);font-size:14px}.toolbar button small{margin-left:8px}.toolbar>button:hover,.dropdown-control>button:hover,.recording-controls button:hover,.download-control:hover,.toolbar button.active{background:#edf5f0;color:var(--green)}.toolbar button.active{border-color:#c7e1d2}.toolbar button.stop-control{border-color:#e8c4bf;background:#fff0ee;color:#9f382c}.toolbar button.stop-control span{color:#b44437}.recording-controls{display:flex;align-items:center;gap:2px;padding:0 5px;border-left:1px solid var(--line);border-right:1px solid var(--line)}.recording-controls button{display:inline-flex;align-items:center;justify-content:center}.recording-controls button.recording{background:#fff0ee;border-color:#e7bbb5;color:#9f382c}.recording-controls .record-icon{color:#c94537;font-size:13px}.recording-controls button.recording .record-icon{animation:record-pulse 1s ease-in-out infinite}.download-control{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}.download-control span{margin-right:6px;color:var(--green);font-size:15px}.download-control:not(.disabled){border-color:var(--green);background:var(--green);color:#fff;box-shadow:0 3px 9px #2e76572b}.download-control:not(.disabled) span{color:#fff}.download-control:not(.disabled):hover{border-color:#245f47;background:#245f47;color:#fff}.download-control.disabled{border-color:#e2dfd7;background:#efede8;color:#aaa79f;opacity:.72;pointer-events:none}.download-control.disabled span{color:#aaa79f}@keyframes record-pulse{50%{opacity:.3;transform:scale(.78)}}.toolbar button:disabled{opacity:.32;cursor:default}.clear-control{margin-left:auto}.dropdown-control{position:relative}.sound-control{padding-left:6px;margin-left:2px;border-left:1px solid var(--line)}.dropdown-menu{position:absolute;left:0;top:47px;z-index:20;width:180px;padding:7px;border:1px solid #d6d3cb;border-radius:10px;background:#fff;box-shadow:0 16px 35px #332e241c}.dropdown-menu>button{width:100%;height:36px;padding:0 10px;border:0;border-radius:6px;background:transparent;text-align:left;color:#5e6058;font-size:11px}.dropdown-menu button:hover,.dropdown-menu button.selected{background:#e7f3ec;color:var(--green)}.note-menu{width:206px}.pitch-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding-top:5px;border-top:1px solid #ece9e2}.pitch-grid button{height:34px;border:0;border-radius:6px;background:#f5f3ed;font-size:10px}.tuner-panel{min-height:76px;padding:11px 20px;display:flex;align-items:center;justify-content:space-between;background:#f7faf8;border-bottom:1px solid #d9e5dd}.recording-status{min-height:43px;padding:0 20px;display:flex;align-items:center;gap:9px;border-bottom:1px solid #ead8d5;background:#fff8f6;color:#8e4b43;font-size:10px}.recording-status strong{text-transform:uppercase;letter-spacing:.08em}.recording-status time{padding-left:9px;border-left:1px solid #dfc6c1;font-variant-numeric:tabular-nums}.recording-status small{margin-left:auto;color:#9a7772}.recording-dot{width:8px;height:8px;border-radius:50%;background:#c94537}.recording-status.live .recording-dot{box-shadow:0 0 0 5px #c9453718;animation:record-pulse 1s ease-in-out infinite}.tuner-panel strong{display:block;color:var(--green);font-size:12px;text-transform:uppercase;letter-spacing:.08em}.tuner-panel small{display:block;margin-top:3px;color:#878a81;font-size:10px}.tuner-notes{display:flex;gap:6px}.tuner-notes button{width:44px;height:44px;border:1px solid #c8dbcf;border-radius:50%;background:#fff;color:var(--green);font-family:var(--font-display);font-size:16px}.tuner-notes button:hover{background:var(--green);color:#fff}.tuner-notes button.active{background:var(--green);color:#fff;box-shadow:0 0 0 4px #2e76571f}.tuner-notes button small{margin:-3px 0 0;color:inherit;font:7px var(--font-body)}.mobile-scroll-hint{display:none}.fretboard-scroll{width:100%;min-width:0;max-width:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;padding:31px 0 15px;background:linear-gradient(#fcfbf8,#f4f1ea);scrollbar-width:thin;scrollbar-color:#bbb7ad transparent;-webkit-overflow-scrolling:touch}.fretboard{width:100%;min-width:980px;height:270px;display:flex;padding:11px 0 30px;user-select:none}.headstock{position:relative;width:138px;flex:0 0 138px;margin-left:-19px;overflow:visible;background:linear-gradient(105deg,#79563d,#4d392d 48%,#33271f);border-radius:44% 12px 12px 44%;box-shadow:inset -12px 0 18px #1c120d6b,0 6px 15px #3e2e221c}.headstock:after{content:"";position:absolute;right:-5px;top:0;width:11px;height:100%;border-radius:3px;background:linear-gradient(90deg,#e6e0cf,#a7a28f,#f1ecdb);box-shadow:2px 0 3px #0004}.headstock-logo{position:absolute;left:45px;top:92px;color:#e9d09e;font:600 35px var(--font-display);opacity:.7}.headstock i{position:absolute;z-index:3;right:-5px;width:108px;background:linear-gradient(#f5f2e8,#89877f);transform-origin:right center;box-shadow:0 1px 1px #0005}.tuner-peg{position:absolute;z-index:4;width:24px;height:14px;border:3px solid #aaa99f;border-radius:5px;background:#e4e2dc;box-shadow:0 2px 3px #0004}.peg-one,.peg-two,.peg-three{left:12px}.peg-four,.peg-five,.peg-six{right:17px}.peg-one,.peg-four{top:28px}.peg-two,.peg-five{top:99px}.peg-three,.peg-six{bottom:28px}.neck{position:relative;display:flex;flex:1;flex-direction:column;background:linear-gradient(90deg,#4a392e,#5d493a 15%,#443329);box-shadow:inset 0 10px 18px #21160f75,inset 0 -10px 18px #21160f75}.neck:after{content:"";position:absolute;inset:0;opacity:.2;pointer-events:none;background:repeating-linear-gradient(4deg,transparent 0 11px,#9a765c 12px,transparent 13px 23px)}.string-row{position:relative;z-index:3;height:35px;display:grid;grid-template-columns:.58fr repeat(12,1fr)}.string-line{position:absolute;z-index:4;left:0;right:0;top:50%;background:linear-gradient(#fffdf4,#9c9a93 60%,#eee9db);box-shadow:0 1px 1px #0009;transform-origin:center;pointer-events:none}.string-line.vibrating{animation:string-vibration .82s cubic-bezier(.22,.68,.34,1)}@keyframes string-vibration{0%{transform:translateY(0)}7%{transform:translateY(-6px)}14%{transform:translateY(5px)}22%{transform:translateY(-4px)}31%{transform:translateY(3px)}42%{transform:translateY(-2px)}56%{transform:translateY(1.3px)}72%{transform:translateY(-.7px)}to{transform:translateY(0)}}.note{position:relative;z-index:5;min-width:0;padding:0;border:0;border-right:4px ridge #bab9ae;background:transparent;touch-action:pan-x}.note.fret-0{border-right:6px solid #ded8c8}.note>span{position:relative;z-index:7;display:inline-grid;place-items:center;width:27px;height:27px;border-radius:50%;background:#fff;color:#36372f;box-shadow:0 3px 8px #1b130da3;opacity:0;transform:scale(.7);transition:.13s ease;font-size:10px;font-weight:700}.note>span.visible,.note:hover>span{opacity:.94;transform:scale(1)}.note.marked>span{opacity:1;transform:scale(1);background:#e9a84c;color:#302116;box-shadow:0 0 0 4px #e9a84c36,0 4px 9px #25170e91}.note.sounding>span{opacity:1;transform:scale(1.12);background:#5bc28d;color:#10281c;box-shadow:0 0 0 5px #5bc28d45,0 0 18px #5bc28d}.fret-markers{position:absolute;z-index:1;inset:0;display:grid;grid-template-columns:.58fr repeat(12,1fr);pointer-events:none}.fret-markers span{position:relative;align-self:center;padding-top:240px;color:#777970;text-align:center;font-size:9px}.fret-markers .dot:before{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;border-radius:50%;background:#d7c5a5;transform:translate(-50%,-50%);box-shadow:inset 0 1px 3px #0006}.fret-markers .dot-12:before{background:transparent;box-shadow:0 -48px #d7c5a5,0 48px #d7c5a5}.left-handed .headstock{order:2;margin-left:0;margin-right:-19px;transform:scaleX(-1)}.left-handed .neck{order:1}.app-footer{min-height:55px;padding:10px 18px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);color:#82847c;font-size:10px}.app-footer p{margin:0}.app-footer b{color:#55584f}.app-footer button{border:0;background:transparent;color:var(--green);font-size:10px}kbd{padding:3px 6px;border:1px solid #cfccc3;border-radius:4px;background:#f6f4ef;box-shadow:0 1px #c7c4bb;font-size:9px}.guide{padding:90px max(24px,8vw);background:#263e32;color:#f6f2e9}.guide .kicker{color:#83c49e}.guide h2{margin:0 0 60px;font:500 clamp(48px,6vw,78px)/.92 var(--font-display);letter-spacing:-.025em}.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:45px}.guide article{padding-top:17px;border-top:1px solid #557062}.guide article>span{color:#83c49e;font-size:10px}.guide h3{margin:28px 0 10px;font:600 24px var(--font-display)}.guide article p{max-width:330px;margin:0;color:#bac8bf;font-size:12px;line-height:1.7}footer{min-height:105px;padding:0 max(24px,5vw);display:flex;align-items:center;justify-content:space-between;background:#fff;color:#797b73;font-size:11px}footer .brand{color:var(--ink)}@media(max-width:1100px){.toolbar{flex-wrap:wrap}.clear-control{margin-left:0}.fretboard-scroll{overflow-x:hidden}.fretboard{width:100%;min-width:0}.headstock{width:110px;flex-basis:110px;margin-left:0}.headstock-logo{left:36px}.headstock i{width:85px}.left-handed .headstock{margin-right:0}}@media(max-width:820px){.site-header nav a{display:none}.title-row{align-items:flex-start;flex-direction:column;gap:16px}.toolbar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.toolbar>button,.dropdown-control,.dropdown-control>button{width:100%}.toolbar>button,.dropdown-control>button{padding:0 8px;white-space:nowrap}.recording-controls{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;padding:7px 0;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.recording-controls button,.download-control{width:100%;padding:0 8px;white-space:nowrap}.sound-control{padding:0;margin:0;border-left:0}.clear-control{margin-left:0}.dropdown-menu{top:45px;max-width:calc(100vw - 46px)}.note-menu{width:260px}.pitch-grid{grid-template-columns:repeat(5,1fr)}.recording-status{flex-wrap:wrap;padding:10px 14px}.recording-status small{width:100%;margin:0;padding-left:17px}.mobile-scroll-hint{display:flex;align-items:center;justify-content:center;gap:8px;min-height:34px;border-bottom:1px solid var(--line);background:#faf8f3;color:#777970;font-size:9px;text-transform:uppercase;letter-spacing:.06em}.mobile-scroll-hint span{color:var(--green);font-size:14px}.fretboard-scroll{overflow-x:hidden;padding-top:20px}.fretboard{width:100%;min-width:0;height:255px;padding-bottom:28px}.headstock{width:90px;flex-basis:90px;margin-left:0}.headstock-logo{left:30px;top:87px}.headstock i{width:69px}.string-row{height:33px}.note{touch-action:manipulation}.headstock i:nth-of-type(1){top:16px!important}.headstock i:nth-of-type(2){top:49px!important}.headstock i:nth-of-type(3){top:82px!important}.headstock i:nth-of-type(4){top:115px!important}.headstock i:nth-of-type(5){top:148px!important}.headstock i:nth-of-type(6){top:181px!important}.fret-markers span{padding-top:223px}.left-handed .headstock{margin-right:0}.guide-grid{grid-template-columns:1fr}.guide article{max-width:500px}}@media(max-width:560px){.site-header{height:60px;padding:0 14px}.site-header nav{display:none}.instrument-section{padding:32px 10px 55px}.title-row{margin-bottom:24px;padding:0 5px}.title-row h1{font-size:45px}.lede{font-size:12px}.guitar-app{border-radius:10px}.toolbar{padding:8px;gap:5px}.toolbar>button,.dropdown-control>button,.recording-controls button,.download-control{min-height:44px;height:44px;font-size:10px}.toolbar button span{margin-right:5px}.tuner-panel{align-items:flex-start;gap:14px;padding:14px;flex-direction:column}.tuner-notes{width:100%;justify-content:space-between;gap:4px}.tuner-notes button{width:44px;height:44px}.fretboard{width:100%;min-width:0;height:244px}.headstock{width:64px;flex-basis:64px;border-radius:35% 9px 9px 35%}.headstock-logo{left:22px;top:80px;font-size:27px}.headstock i{width:49px}.tuner-peg{display:none}.string-row{height:31px}.note{border-right-width:2px}.note.fret-0{border-right-width:3px}.note>span{width:20px;height:20px;font-size:8px;box-shadow:0 2px 5px #1b130d91}.headstock i:nth-of-type(1){top:15px!important}.headstock i:nth-of-type(2){top:46px!important}.headstock i:nth-of-type(3){top:77px!important}.headstock i:nth-of-type(4){top:108px!important}.headstock i:nth-of-type(5){top:139px!important}.headstock i:nth-of-type(6){top:170px!important}.fret-markers span{padding-top:212px}.app-footer{align-items:flex-start;gap:12px;padding:13px 14px;flex-direction:column;line-height:1.6}.guide{padding:65px 20px}.guide h2{margin-bottom:45px;font-size:50px}footer{padding:26px 20px;align-items:flex-start;gap:22px;flex-direction:column}}@media(max-width:380px){.instrument-section{padding-left:6px;padding-right:6px}.toolbar{grid-template-columns:repeat(2,minmax(0,1fr))}.recording-controls{grid-column:1/-1;grid-template-columns:1fr 1fr}.recording-controls .download-control{grid-column:1/-1}.toolbar>button,.dropdown-control>button,.recording-controls button,.download-control{overflow:hidden;text-overflow:ellipsis}.note-menu{position:fixed;left:8px;right:8px;top:auto;width:auto;max-width:none}.pitch-grid{grid-template-columns:repeat(6,1fr)}.fretboard{width:100%;min-width:0}.headstock{width:52px;flex-basis:52px}.headstock-logo{left:18px}.headstock i{width:40px}.note>span{width:18px;height:18px;font-size:7px}}@media(max-height:500px)and (orientation:landscape){.site-header{height:52px}.instrument-section{padding-top:22px}.title-row{margin-bottom:18px}.title-row h1{font-size:38px}.lede{display:none}.toolbar>button,.dropdown-control>button,.recording-controls button,.download-control{height:40px;min-height:40px}.fretboard{height:232px}.string-row{height:29px}.fret-markers span{padding-top:202px}}@media(hover:none)and (pointer:coarse){button,a{min-height:44px}.note{min-height:31px}.note:hover>span:not(.visible){opacity:0;transform:scale(.7)}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.string-line.vibrating,.recording-controls button.recording .record-icon,.recording-status.live .recording-dot{animation:none}}