*{box-sizing:border-box;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f7fafc;color:#2d3748;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.7}.App{display:flex;flex-direction:column;min-height:100vh}.App-header{background:linear-gradient(135deg,#4299e1,#3182ce);border-bottom:3px solid #4299e1;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;color:#fff;padding:2.5rem 2rem;position:relative;text-align:center}.App-header h1{flex:1 1;font-size:2rem;font-weight:800;letter-spacing:-1px;line-height:1.2;margin:0;text-align:center}.App-header p{font-size:1.35rem;font-weight:400;margin-left:auto;margin-right:auto;max-width:700px;opacity:.95}.header-top{align-items:center;display:flex;gap:2rem;justify-content:space-between;margin-bottom:1rem}.webfretboard-link{align-items:center;background-color:#4299e1;border:none;border-radius:8px;box-shadow:0 4px 6px -1px #4299e14d,0 2px 4px -1px #4299e133;color:#fff;cursor:pointer;display:inline-flex;font-size:1rem;font-weight:600;gap:.5rem;letter-spacing:.3px;padding:.875rem 2.25rem;text-decoration:none;transition:all .2s ease}.webfretboard-link:hover{background-color:#3182ce;box-shadow:0 10px 15px -3px #4299e14d,0 4px 6px -2px #4299e133;transform:translateY(-2px)}.qr-code-container{display:flex;justify-content:flex-start}.qr-code-box{background:#fffffff2;border-radius:8px;box-shadow:0 2px 8px #0003;display:inline-block;padding:.5rem}.qr-code{cursor:pointer;display:block;height:80px;transition:transform .3s ease;width:80px}.qr-code:hover{transform:scale(1.1)}.container{display:flex;flex:1 1;gap:2rem;margin:2rem auto;max-width:1400px;padding:0 2rem;width:100%}.lesson-nav{background-color:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;flex:0 0 300px;height:-webkit-fit-content;height:fit-content;padding:2rem;position:-webkit-sticky;position:sticky;top:2rem}.lesson-nav h2{color:#1a202c;font-size:1.75rem;font-weight:700;letter-spacing:-.5px;margin-bottom:1.25rem}.lesson-nav ul{list-style:none}.lesson-nav li{background-color:#f7fafc;border-left:4px solid #0000;border-radius:8px;color:#4a5568;cursor:pointer;font-weight:500;margin-bottom:.875rem;padding:1.125rem 1rem;transition:all .2s ease}.lesson-nav li:hover{background-color:#ebf8ff;border-left-color:#4299e1;transform:translateX(5px)}.lesson-nav li.active{background-color:#4299e1;border-left-color:#4299e1;box-shadow:0 4px 6px -1px #4299e14d,0 2px 4px -1px #4299e133;color:#fff;font-weight:600}.lesson-content{background-color:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;flex:1 1;line-height:1.8;padding:2.5rem}.lesson-content h2{border-bottom:3px solid #4299e1;color:#1a202c;font-size:2.75rem;font-weight:700;letter-spacing:-.5px;margin-bottom:1.5rem;padding-bottom:.75rem}.lesson-content p{color:#4a5568;font-size:1.125rem;line-height:1.8;margin-bottom:1.5rem}.diagram-container{margin:2rem 0;text-align:center}.diagram-image{border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;height:auto;margin-bottom:1.5rem;max-width:100%;transition:all .2s ease}.diagram-image:hover{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;transform:scale(1.02)}.diagram-note{background-color:#fefcbf;border-left:4px solid #ecc94b;border-radius:8px;color:#744210;font-size:.95rem;font-style:normal;line-height:1.7;margin-top:1.5rem;padding:1.25rem}.diagram-note a{color:#2c5282;font-weight:500;text-decoration:underline}.diagram-note a:hover{color:#2a4365}.App-footer{background-color:#1a202c;border-top:3px solid #4299e1;color:#e2e8f0;margin-top:3rem;padding:2.5rem 2rem;text-align:center}.App-footer p{font-size:.95rem;margin:.5rem 0;opacity:.9}@media (max-width:768px){.container{flex-direction:column;gap:1.5rem;padding:0 1rem}.lesson-nav{flex:1 1;position:static}.App-header p{font-size:1.125rem}.lesson-content h2{font-size:2.25rem}.lesson-content p{font-size:1rem}.header-top{align-items:center;flex-direction:column;gap:1rem}.App-header h1{font-size:1.5rem;text-align:center}.webfretboard-link{font-size:.9375rem;padding:.75rem 1.75rem}.qr-code{height:60px;width:60px}.qr-code-box{padding:.4rem}}
/*# sourceMappingURL=main.93b4c3ca.css.map*/