:root{color-scheme:light;--paper:#f7f6f2;--surface:#fff;--ink:#203833;--muted:#526660;--green:#19675b;--green-hover:#125448;--border:#d6dbd5;--soft:#eeefea;--radius:12px;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",Arial,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}button:disabled{cursor:default;opacity:.35}button,a,input{touch-action:manipulation}button{transition:background-color 130ms,color 130ms,border-color 130ms}button:hover:not(:disabled){background:var(--soft)}button:focus-visible,a:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--green);outline-offset:4px}button[aria-pressed=true]{background:var(--green);color:#fff;border-color:var(--green)}[hidden]{display:none!important}a{color:var(--green);text-underline-offset:3px}.icon-library{position:absolute;width:0;height:0;overflow:hidden}.icon{display:block;flex:none;width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.icon.filled{fill:currentColor;stroke-width:1.2}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;left:20px;top:10px;transform:translateY(-200%);z-index:20;background:white;padding:15px;border-radius:8px}.skip-link:focus{transform:translateY(0)}
.app-shell{width:min(1180px,calc(100% - 64px));margin:28px auto 32px}.app-header{height:76px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e4e6e0;padding:0 8px 16px}.brand{font-size:31px;line-height:1;font-weight:700;letter-spacing:-1.2px;color:var(--ink);text-decoration:none}.app-header nav{display:flex;align-items:center;gap:14px}.header-action,.icon-button{border:0;background:transparent;min-height:56px;display:flex;align-items:center;justify-content:center;gap:11px;border-radius:8px;font-size:18px}.header-action{padding:0 14px}.icon-button{min-width:56px;padding:12px}.help-button .icon{width:32px;height:32px}.saved-count{font-size:14px;min-width:23px;height:23px;border-radius:20px;background:var(--green);color:white;display:grid;place-items:center}.selectors{padding:24px 8px 22px}.root-controls{display:grid;grid-template-columns:repeat(7,minmax(0,1fr)) 1.12fr;gap:12px}.root-button,.quality-button{border:1px solid #c9d0c9;background:transparent;border-radius:8px;min-height:70px;font-size:27px;font-weight:600;padding:10px 8px;line-height:1.2}.root-button.more{font-size:20px;font-weight:500}.quality-controls{display:flex;align-items:stretch;justify-content:center;gap:12px;margin-top:22px}.quality-button{min-width:132px;min-height:56px;font-size:21px;font-weight:500;padding:12px 22px}.quality-button.more{max-width:330px}
.chord-stage{background:var(--surface);border:1px solid #eee;box-shadow:0 3px 15px #20383303;border-radius:var(--radius);padding:28px 22px 20px;scroll-margin-top:15px}.chord-layout{width:100%;display:grid;grid-template-columns:43% 57%;grid-template-areas:"heading diagram" "actions diagram" ". variants";align-items:center;max-width:1000px;margin:auto}.chord-heading{grid-area:heading;padding:12px 40px 0 54px;align-self:center}.chord-heading h1{margin:0;font-weight:700;letter-spacing:-4px;line-height:1}.chord-root{display:block;font-size:clamp(105px,12vw,166px)}.chord-quality{display:block;font-size:clamp(39px,4.6vw,62px);letter-spacing:-2px;line-height:1.06;margin-top:2px;overflow-wrap:anywhere}.chord-quality.long-quality{font-size:clamp(32px,3.6vw,49px);letter-spacing:-1.5px}.grip-label{font-size:20px;line-height:1.5;margin:17px 0 0;color:var(--ink)}.diagram{grid-area:diagram;display:flex;justify-content:center;align-items:center;min-width:0;align-self:center}.chord-diagram{width:min(100%,470px);height:auto;display:block;overflow:visible}.chord-actions{grid-area:actions;display:flex;flex-direction:column;gap:12px;align-self:start;width:min(290px,100%);margin:8px auto 16px}.button{min-height:60px;border:1px solid #bcc7bf;background:transparent;border-radius:8px;padding:12px 22px;display:flex;justify-content:center;align-items:center;gap:13px;font-size:21px;line-height:1.25;font-weight:500}.button.primary{color:white;background:var(--green);border-color:var(--green)}.button.primary:hover:not(:disabled){background:var(--green-hover)}.button.outlined{border-color:var(--green);color:var(--ink)}.button.outlined[aria-pressed=true]{color:var(--green);background:#e9f1ed}.variants{grid-area:variants;display:flex;align-items:center;justify-content:space-between;gap:15px;align-self:start;width:min(410px,100%);margin:9px auto 22px}.variants p{font-size:20px;line-height:1.4;text-align:center;margin:0}.arrow-button{width:76px;min-width:60px;min-height:66px;padding:12px}.arrow-button .icon{width:30px;height:30px}.stage-footer{display:flex;justify-content:space-between;align-items:center;gap:16px;border:1px solid #e2e5df;border-radius:9px;margin-top:26px;padding:10px 14px}.details-toggle{border:0;background:transparent;border-radius:6px;display:flex;align-items:center;gap:17px;padding:10px 10px;min-height:56px;font-size:21px;text-align:left}.details-toggle .icon{transition:transform 130ms}.details-toggle[aria-expanded=true] .icon{transform:rotate(180deg)}.focus-toggle{font-size:18px;min-height:56px;padding:10px 16px}.focus-toggle .icon{width:24px;height:24px}.chord-details{padding:8px 14px 8px}.detail-columns{display:grid;grid-template-columns:1fr 1fr;gap:20px 40px}.chord-details h2,.chord-details h3{font-size:20px;line-height:1.4;font-weight:600;margin:18px 0 8px}.chord-details p{font-size:17px;line-height:1.65;margin:5px 0;color:var(--muted)}.chord-details strong{color:var(--ink);font-weight:600}.note-line{font-size:22px!important;letter-spacing:1px;color:var(--ink)!important}.detail-caption{margin-top:20px!important;padding-top:16px;border-top:1px solid var(--border)}.load-status{padding:70px 24px;text-align:center;font-size:21px;line-height:1.5}.load-status .button{margin:20px auto 0}.visible-message{font-size:16px;line-height:1.5;margin:16px 8px 0;color:var(--muted)}
dialog{width:min(680px,calc(100% - 32px));max-height:calc(100dvh - 48px);border:1px solid var(--border);border-radius:16px;background:var(--paper);color:var(--ink);padding:24px 28px 30px;box-shadow:0 25px 100px #182a3340;overscroll-behavior:contain}dialog::backdrop{background:rgb(24 39 34 / 38%);backdrop-filter:blur(3px)}.dialog-header{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:22px}.dialog-header h2{font-size:28px;letter-spacing:-.6px;line-height:1.25;font-weight:600;margin:0}.dialog-header .icon-button{flex:none}.dialog-note{font-size:17px;color:var(--muted);line-height:1.6;margin:20px 0 0}.all-roots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.all-roots button{min-height:72px;font-size:22px;display:flex;flex-direction:column;gap:3px;justify-content:center;align-items:center}.all-roots small{font-size:13px;font-weight:400}.search-label{display:block;font-size:15px;font-weight:600;margin-bottom:9px}input[type=search]{width:100%;min-height:56px;padding:12px 16px;border:1px solid #b8c4bb;border-radius:8px;background:#fff;color:var(--ink);font-size:18px;outline-offset:3px}input::placeholder{color:#65756b}.quality-group{margin-top:24px}.quality-group summary{cursor:pointer;min-height:56px;display:flex;align-items:center;gap:12px;font-size:20px;color:var(--ink);font-weight:600;letter-spacing:-.2px;padding:10px 0;list-style:none;border-bottom:1px solid var(--border)}.quality-group summary::-webkit-details-marker{display:none}.quality-group summary::before{content:"";width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);margin:0 4px 0 2px}.quality-group[open] summary::before{transform:rotate(45deg);margin-top:-4px}.quality-group summary:focus-visible{outline:3px solid var(--green);outline-offset:4px}.quality-group[open] summary{margin-bottom:10px}.quality-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}.quality-option{min-height:66px;padding:10px 12px;display:flex;align-items:center;gap:12px;text-align:left;border:1px solid var(--border);background:#fff;border-radius:8px;font-size:16px;line-height:1.3}.quality-option strong{font-size:22px;min-width:70px;font-weight:600}.quality-option span{color:var(--muted)}.quality-option[aria-pressed=true] span{color:white}.saved-row{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border);padding:10px 0}.saved-select{flex:1;min-width:0;background:transparent;border:0;border-radius:8px;padding:12px;text-align:left;display:flex;align-items:center;gap:16px;min-height:74px}.saved-select strong{font-size:26px;min-width:80px;overflow-wrap:anywhere}.saved-select span{font-size:16px;line-height:1.4;color:var(--muted)}.saved-remove{flex:none;min-height:56px;min-width:56px}.saved-empty{font-size:20px;line-height:1.5;padding:26px 0 6px}.help-content p{font-size:17px;line-height:1.65;margin:10px 0}.help-content h3{font-size:21px;font-weight:600;margin:25px 0 8px}.help-content strong{font-weight:600}
body.focus-mode .app-shell{width:min(1600px,calc(100% - 48px));margin:14px auto}body.focus-mode .app-header{display:none}body.focus-mode .selectors{padding-top:5px;padding-bottom:14px}body.focus-mode .quality-controls{margin-top:14px}body.focus-mode .root-button{min-height:56px}body.focus-mode .chord-layout{max-width:1280px;grid-template-columns:39% 61%}body.focus-mode .chord-stage{padding-top:8px}body.focus-mode .chord-diagram{width:min(100%,590px);max-height:calc(100dvh - 355px);min-height:280px}body.focus-mode .chord-root{font-size:clamp(140px,15vw,220px)}body.focus-mode .stage-footer{margin-top:8px}body.focus-mode .chord-actions{margin-bottom:8px}body.focus-mode .focus-toggle[aria-pressed=true]{background:var(--green);color:white}body.focus-mode .chord-heading{padding-left:25px}
@media(min-width:1450px){.app-shell{margin-top:35px}.chord-stage{padding-top:32px;padding-bottom:22px}.chord-diagram{width:490px}.chord-layout{max-width:1040px}.chord-heading{padding-left:64px}.stage-footer{margin-top:30px}}
@media(max-width:850px) and (min-width:641px){.app-shell{width:calc(100% - 36px);margin:18px auto}.root-controls{gap:8px}.root-button{font-size:24px;min-height:64px}.root-button.more{font-size:17px}.chord-heading{padding-left:25px;padding-right:15px}.chord-actions{width:90%}.chord-quality{font-size:45px}.chord-stage{padding:24px 16px 18px}.variants{gap:8px}.variants p{font-size:17px}.arrow-button{width:60px}.stage-footer{padding:8px;gap:8px}.details-toggle{font-size:18px;gap:12px}.focus-toggle{font-size:17px;padding:10px}.detail-columns{gap:20px}}
@media(max-width:640px){.app-shell{width:calc(100% - 24px);margin:10px auto 18px}.app-header{height:60px;padding:0 5px 8px}.brand{font-size:27px;letter-spacing:-1px}.app-header nav{gap:0}.header-action{font-size:15px;min-height:48px;padding:0 9px;gap:7px}.header-action .icon{width:22px;height:22px}.icon-button{min-width:48px;min-height:48px;padding:10px}.help-button .icon{width:27px;height:27px}.saved-count{width:20px;min-width:20px;height:20px;font-size:12px}.selectors{padding:15px 0}.root-controls{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.root-button{min-height:50px;font-size:24px;padding:8px 4px;border-radius:7px}.root-button.more{font-size:17px}.quality-controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-top:12px}.quality-button{min-width:0;min-height:49px;padding:10px 5px;font-size:17px;border-radius:7px}.quality-button.more{font-size:16px;overflow-wrap:anywhere}.chord-stage{padding:14px 14px 12px;border-radius:11px}.chord-layout{display:grid;grid-template-columns:100%;grid-template-areas:"heading" "diagram" "variants" "actions";gap:0}.chord-heading{padding:0;text-align:center}.chord-heading h1{letter-spacing:-2px}.chord-root{font-size:79px;line-height:1}.chord-quality{font-size:39px;letter-spacing:-1.5px;margin-top:0}.chord-quality.long-quality{font-size:32px;letter-spacing:-.8px}.grip-label{font-size:17px;line-height:1.4;margin:7px 0 5px}.chord-diagram{width:min(100%,330px);max-height:320px}.diagram{margin:0 auto;width:100%}.chord-actions{width:100%;gap:9px;margin:6px 0 0}.button{min-height:52px;font-size:19px;padding:11px 15px;gap:10px}.button .icon{width:24px;height:24px}.variants{width:100%;margin:6px 0 8px;gap:10px}.variants p{font-size:17px}.arrow-button{width:60px;min-width:56px;min-height:52px}.arrow-button .icon{width:27px;height:27px}.stage-footer{display:flex;flex-direction:column;align-items:stretch;border:0;margin-top:20px;gap:9px;padding:0}.details-toggle{border:1px solid #dfe3dc;min-height:54px;font-size:18px;gap:13px;padding:11px 15px}.details-toggle .icon{width:22px;height:22px}.focus-toggle{border-color:#dfe3dc;justify-content:flex-start;min-height:52px;font-size:18px;gap:13px}.chord-details{padding:8px 1px 4px}.detail-columns{display:block}.chord-details h2,.chord-details h3{font-size:19px}.chord-details p{font-size:16px}.visible-message{font-size:15px}.load-status{font-size:19px;padding:50px 10px}dialog{width:calc(100% - 20px);max-height:calc(100dvh - 20px);padding:18px 18px 25px;border-radius:12px}.dialog-header{gap:10px;margin-bottom:16px}.dialog-header h2{font-size:25px}.all-roots{gap:8px}.all-roots button{min-height:64px;font-size:21px}.dialog-note{font-size:16px}.quality-options{grid-template-columns:1fr}.quality-option{min-height:59px;font-size:16px}.quality-option strong{min-width:90px}.help-content p{font-size:16px}.saved-select{padding:9px 4px;gap:9px}.saved-select strong{font-size:23px;min-width:65px}.saved-select span{font-size:15px}.saved-row{gap:3px}.saved-remove{min-width:48px;min-height:48px}body.focus-mode .app-shell{width:calc(100% - 16px);margin:8px auto}body.focus-mode .root-controls{grid-template-columns:repeat(4,minmax(0,1fr))}body.focus-mode .root-button{min-height:48px}body.focus-mode .selectors{padding-bottom:10px}body.focus-mode .quality-controls{margin-top:8px}body.focus-mode .chord-layout{grid-template-columns:100%;grid-template-areas:"heading" "diagram" "variants" "actions"}body.focus-mode .chord-heading{padding:0}body.focus-mode .chord-root{font-size:76px}body.focus-mode .chord-heading h1{display:flex;align-items:baseline;justify-content:center;gap:12px}body.focus-mode .chord-quality{font-size:36px}body.focus-mode .chord-diagram{max-height:none;min-height:0;width:min(100%,430px)}body.focus-mode .chord-actions{display:grid;grid-template-columns:1fr 1fr;margin-bottom:8px}body.focus-mode .stage-footer{margin-top:10px}}
@media(min-width:851px) and (max-height:950px){.app-shell{margin:12px auto 18px}.app-header{height:64px;padding-bottom:8px}.selectors{padding:16px 8px}.quality-controls{margin-top:14px}.root-button{min-height:62px}.chord-stage{padding-top:14px;padding-bottom:14px}.chord-diagram{width:min(100%,430px);max-height:calc(100dvh - 430px);min-height:320px}.chord-heading{padding-top:0}.chord-root{font-size:clamp(105px,11vw,150px)}.chord-quality{font-size:54px}.grip-label{margin-top:12px}.chord-actions{margin:4px auto 8px}.variants{margin:6px auto 8px}.stage-footer{margin-top:12px;padding:6px 12px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
@media print{body{background:#fff}.app-shell{width:100%;margin:0}.app-header,.selectors,.chord-actions,.variants,.stage-footer,.visible-message,dialog{display:none!important}.chord-stage{border:0;box-shadow:none;padding:0}.chord-details{display:block!important}.chord-layout{grid-template-areas:"heading diagram";grid-template-columns:40% 60%}.chord-heading{padding:0}.chord-diagram{width:100%;max-height:none!important}.chord-root{font-size:100px}.chord-quality{font-size:40px}}