.app{box-sizing:border-box;width:min(1400px,100% - 32px);margin-inline:auto;padding:48px 0}.app-header{margin-bottom:32px}.eyebrow{color:#a87842;letter-spacing:.12em;text-transform:uppercase;margin:0 0 8px;font-size:.85rem;font-weight:700}.app-header h1{color:#123f46;margin:0 0 12px;font-size:clamp(2rem,5vw,3.5rem)}.app-header p{color:#526065;margin:0}.fretboard-panel{background:#fff;border:1px solid #d9dedc;border-radius:16px;padding:24px;overflow-x:auto;box-shadow:0 12px 32px #17383d14}.fretboard{width:100%;min-width:800px;display:block}.fretboard-background{fill:#f1e4cb}.string-name,.fret-number{fill:#334448;text-anchor:middle;dominant-baseline:middle;font-family:Arial,sans-serif}.string-name{font-size:18px;font-weight:700}.fret-number{font-size:16px}.tool-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;display:grid}.tool-card{color:#26383c;text-align:left;cursor:pointer;background:#fff;border:1px solid #d9dedc;border-radius:14px;flex-direction:column;gap:8px;padding:28px;display:flex}.tool-card:hover{border-color:#a87842}.tool-card strong{color:#123f46;font-size:1.25rem}.tool-card span{color:#526065}.back-button{color:#fff;cursor:pointer;background:#526065;border:#fff;margin-bottom:10px;padding:0}.category-navigation{gap:10px;margin:24px 0;display:flex}.category-button{color:#334448;cursor:pointer;background:#fff;border:1px solid #d9dedc;border-radius:8px;padding:10px 18px}.category-button.active{color:#fff;background:#123f46;border-color:#123f46}@media print{.no-print{display:none!important}}.chord-diagram{box-sizing:border-box;background:#fffdf9;border:1px solid #dce1e3;border-radius:14px;width:100%;min-width:0;max-width:200px;margin:0;padding:20px 14px;box-shadow:0 5px 18px #142d3412}.chord-name{color:#123f46;text-align:center;margin:0;font-size:clamp(1.2rem,13cqw,2rem)}.chord-svg{width:100%;max-width:210px;height:auto;margin:0 auto;display:block}.chord-string,.chord-fret{stroke:#596366;stroke-width:2px}.chord-nut{stroke:#26383c;stroke-width:7px}.string-status,.start-fret,.finger-number{text-anchor:middle;dominant-baseline:middle;font-family:Arial,Helvetica,sans-serif}.start-fret{fill:#526065;font-size:20px}.finger-dot,.barre{fill:#a87842}.finger-number{fill:#fff;font-size:16px;font-weight:700}.open-string{fill:none;stroke:#31464c;stroke-width:2px}.muted-string{stroke:#31464c;stroke-width:3px;stroke-linecap:round}.chord-fret-values{color:#526065;margin:-16px 0 0;font-size:.85rem}@media print{.chord-diagram{width:100%;box-shadow:none;break-inside:avoid;page-break-inside:avoid;border:0 solid #aaa;border-radius:0;padding:3mm 2mm}.chord-svg{width:100%;height:auto;box-shadow:none;margin:0 auto;overflow:visible}}.note-names{flex-wrap:wrap;justify-content:center;gap:8px 24px;display:flex}.chord-list{grid-template-columns:repeat(4,minmax(0,1fr));justify-content:stretch;gap:10px;width:100%;display:grid}@media print{@page{size:A4 portrait;margin:1mm}header.wp-block-template-part,footer.wp-block-template-part,.site-header,.site-footer,#masthead,#colophon,#wpadminbar,h1,h1.wp-block-heading,h1.wp-block-post-title,.entry-title,.page-title,.page-header,.no-print{display:none!important}.chord-list{grid-template-columns:repeat(4,40mm);justify-content:center;gap:0 5mm;display:grid}.print-button{display:none}}.app-print-root{display:none}@media print{html,body{width:auto!important;height:auto!important;min-height:0!important;margin:0!important;padding:0!important}body>:not(.app-print-root){display:none!important}.app-print-root{break-before:auto!important;break-after:auto!important;page-break-before:auto!important;page-break-after:auto!important;width:100%!important;height:auto!important;min-height:0!important;margin:0!important;padding:0!important;display:block!important;position:static!important}.app-print-root .no-print,.app-print-root .print-button{display:none!important}}.fretboard{width:100%;min-width:820px;height:auto;display:block}.fretboard-background{fill:var(--cream);stroke:#c8c1b6;stroke-width:1px}.fret{stroke:#aaa398;stroke-width:1.3px}.nut{stroke:#77736c;stroke-width:7px}.string{stroke:#77736c}.string-name{fill:#586166;font-family:Georgia,Times New Roman,serif;font-size:15px}.fret-number{fill:#697175;text-anchor:middle;font-family:Georgia,Times New Roman,serif;font-size:15px}.fret-marker{fill:#211f1f}.fretboard-note{fill:#0b4d5d}.root-note{fill:#a8763f}.fretboard .note-label{fill:#fff;text-anchor:middle;dominant-baseline:central;pointer-events:none;font-family:Arial,sans-serif;font-size:12px;font-weight:700}.scale-arpeggio-page{--petrol:#0b4d5d;--petrol-dark:#073846;--bronze:#a8763f;--cream:#faf7f1;--line:#9b958a;--border:#dce1e3;--text:#23343a;--muted:#667075;--danger:#b83232;box-sizing:border-box;width:min(100% - 24px,1500px);color:var(--text);margin-inline:auto;padding-top:20px}.scale-arpeggio-page *,.scale-arpeggio-page :before,.scale-arpeggio-page :after{box-sizing:border-box}.scale-arpeggio-header{justify-content:space-between;align-items:center;gap:30px;margin-bottom:16px;display:flex}.scale-arpeggio-header h1{color:var(--petrol-dark);margin:0;font-family:Georgia,Times New Roman,serif;font-size:clamp(2.3rem,4vw,4rem);line-height:1}.scale-arpeggio-header p{color:var(--muted);margin:12px 0 0;font-size:1.1rem}.add-fretboard-button{background:var(--bronze);color:#90ee90;min-height:52px;font:inherit;cursor:pointer;border:0;border-radius:11px;flex-shrink:0;padding:0 28px;font-size:1rem;transition:background-color .15s,transform .15s}.add-fretboard-button:hover{background:#8f6234;transform:translateY(-1px)}.fretboard-card-list{gap:22px;width:100%;margin-inline:auto;display:grid}.fretboard-card{border:1px solid var(--border);background:#fff;border-radius:16px;width:100%;min-width:0;max-width:100%;margin-inline:auto;padding:5px 24px 18px;overflow:hidden;box-shadow:0 5px 18px #142d3412}.fretboard-card-header{justify-content:space-between;align-items:center;gap:20px;margin-bottom:18px;display:flex}.fretboard-card-header h2{color:var(--petrol-dark);margin:0;font-family:Georgia,Times New Roman,serif;font-size:1.65rem}.fretboard-card-actions{gap:10px;display:flex}.fretboard-card-buttons{gap:8px;display:flex}.add-small-button,.delete-fretboard-button{cursor:pointer;border-radius:9px;place-items:center;width:44px;height:44px;padding:0;display:grid}.add-small-button{color:var(--petrol);background:#f2f8f8;border:1px solid #c9d7d9}.add-small-button:hover{background:#e2f0f1}.add-small-button svg,.delete-fretboard-button svg{width:21px;height:21px}.fretboard-controls{grid-template-columns:minmax(110px,.65fr) minmax(110px,.65fr) minmax(160px,1fr) minmax(130px,.8fr) minmax(130px,.75fr) auto;align-items:end;gap:12px;margin:0;display:grid}.fretboard-controls label{color:var(--petrol-dark);gap:6px;font-size:.88rem;font-weight:600;display:grid}.fretboard-controls select{width:100%;min-height:44px;color:var(--text);font:inherit;cursor:pointer;background-color:#fff;border:1px solid #c9d0d3;border-radius:9px;padding:0 38px 0 13px}.fretboard-controls select:hover{border-color:#8fa0a6}.fretboard-controls select:focus{border-color:var(--petrol);outline:3px solid #0b4d5d24}.fretboard-card-content{-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;width:100%;min-width:0;max-width:100%;margin-top:8px;padding-bottom:6px;display:block;overflow-x:auto}@media (width<=1100px){.scale-arpeggio-page{width:min(100% - 24px,1500px);padding-top:28px}.scale-arpeggio-header{flex-direction:column;align-items:stretch}.add-fretboard-button{width:100%}.fretboard-card{padding:18px 14px 14px}.fretboard-card-header{align-items:flex-start}.fretboard-card-header h2{font-size:1.35rem}.fretboard-controls{scrollbar-color:#b6c1c4 transparent;align-items:flex-end;gap:10px;width:100%;max-width:100%;padding-bottom:8px;display:flex;overflow:auto hidden}.fretboard{min-width:760px}}@media print{.scale-arpeggio-header p,.add-fretboard-button,.fretboard-card-actions{display:none}.scale-arpeggio-page{width:100%;padding:0}.fretboard-card{break-inside:avoid;box-shadow:none}.fretboard-card-content{overflow:visible}.fretboard{min-width:0}}*{box-sizing:border-box}html{color:#26383c;background:#f7f3e9;font-family:Arial,Helvetica,sans-serif}body{min-width:320px;min-height:100vh;margin:0}button,select,input{font:inherit}