@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap');
:root{--ink:#202d40;--muted:#8190a3;--paper:#fff;--line:#e1e7ef;--accent:#4776b3;--green:#203f68}*{box-sizing:border-box}body{margin:0;background:#f4f6f9;color:var(--ink);font:14px 'DM Sans','Noto Sans TC',sans-serif}button,input,select{font:inherit}button{cursor:pointer;background:white;color:var(--ink);border:1px solid var(--line);border-radius:7px;padding:9px 12px;transition:.15s}button:hover{border-color:var(--accent);background:#eff4fc}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}button.active{background:var(--green);color:white;border-color:var(--green)}button.primary{background:var(--accent);color:white;border-color:var(--accent)}header{height:80px;background:#fbfcfe;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 4%}.brand{display:flex;align-items:center;gap:5px;letter-spacing:1px;font-weight:700;text-decoration:none;color:var(--ink);font-size:19px}.brand>span:not(.logo){font-weight:400}.logo{font-size:34px;background:var(--green);color:#fff;width:37px;height:41px;border-radius:8px;display:grid;place-items:center;margin-right:10px}.brand small{font-size:9px;margin-left:9px;color:var(--muted);letter-spacing:2px}nav{display:flex;align-items:center;gap:9px}.status{font-size:11px;color:#7186a1;margin-right:16px}main{max-width:1600px;margin:auto;padding:0 4%}.intro{display:flex;justify-content:space-between;padding:40px 0 32px;align-items:center}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--accent);font-weight:700;margin:0 0 12px}h1{font-size:32px;letter-spacing:1px;margin:0 0 12px;font-weight:600}.intro p:not(.eyebrow){color:#7b8797;margin:0;font-size:13px}.intro-note{border-left:1px solid #dae3ef;padding-left:24px;display:grid;gap:7px}.intro-note span,.intro-note small{font-size:10px;color:var(--muted);letter-spacing:1px}.intro-note strong{font-size:16px;font-weight:500}.workspace{display:grid;grid-template-columns:265px minmax(380px,1fr) 245px;background:white;border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 8px 35px #203f6810}.workspace>aside{padding:24px 20px}.workspace>aside:first-child{border-right:1px solid var(--line)}.export{border-left:1px solid var(--line)}.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:19px}.section-head>span{font-size:11px;color:#a0acbb}h2{font-size:15px;margin:0;font-weight:600}label{display:block;font-size:11px;color:#66768a;margin:17px 0 7px}input:not([type=checkbox]):not([type=range]):not([type=color]),select{width:100%;border:1px solid var(--line);border-radius:6px;padding:10px;background:#fcfdff;color:var(--ink);min-width:0}input[type=color]{display:block;width:100%;height:30px;padding:2px;border:1px solid var(--line);border-radius:5px;background:white}input[type=range]{width:100%;accent-color:var(--green)}.row{display:flex;gap:6px;align-items:center}.row input{min-width:0}.row button{white-space:nowrap}.hint{font-size:11px;line-height:1.8;color:#8a97a8}.seg{display:flex;margin:18px 0 6px;gap:4px}.seg button{flex:1;font-size:11px;padding:9px 4px}.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}.muted{color:#9ca9b9;font-size:9px}.check{display:flex;align-items:center;gap:8px;margin:13px 0;font-size:11px}.check input{accent-color:var(--green)}summary{cursor:pointer;margin-top:23px;font-size:12px;padding-top:19px;border-top:1px solid var(--line)}output{float:right;color:#9ca9bb}.editor{padding:25px 25px 0;min-width:0}.canvas-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.canvas-head h2{font-size:19px}.canvas-head .eyebrow{margin:0 0 7px}.canvas-head button{font-size:11px}.tools{display:flex;justify-content:center;gap:5px;padding:7px;background:#f1f4f9;border-radius:9px}.tools button{border:0;background:transparent;font-size:12px;flex:1;padding:9px 3px}.tools button.active{background:white;color:var(--green);box-shadow:0 2px 5px #2221}.tool-options{min-height:53px;display:flex;align-items:center;justify-content:center;gap:10px;padding:8px 0}.tool-options span{font-size:10px;color:#8996a8;line-height:1.6}.tool-options input:not([type=color]){width:155px!important}.tool-options input[type=color]{width:45px}.tool-options select{width:95px}.artboard{border:1px solid #e2e8f1;border-radius:8px;background-color:#f0f4fa;background-image:radial-gradient(#d3ddeb .8px,transparent .8px);background-size:14px 14px;min-height:450px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:25px 15px;gap:20px}.paper{background:white;width:290px;max-width:100%;border-radius:3px;box-shadow:0 8px 22px #203f6818;line-height:0;touch-action:none}.paper svg{width:100%;height:auto;user-select:none}.paper-label{font-size:8px;letter-spacing:1.8px;color:#95a4b9}.canvas-foot{display:flex;align-items:center;justify-content:space-between;padding:18px 0;font-size:11px;color:#8a99ab}.canvas-foot button{color:var(--green);font-size:12px}.collection{border-top:1px solid var(--line);padding-top:24px;margin-top:2px;padding-bottom:24px}.collection .eyebrow{font-size:8px;margin-bottom:8px}.collection h2 span{font-size:11px;color:#94a6bd;padding-left:7px}.collection button{font-size:10px}.collection-bottom{display:flex;gap:7px;margin-top:13px}.collection-bottom input{font-size:10px!important}.collection-bottom button{white-space:nowrap}#cards{display:flex;gap:9px;overflow:auto;padding:4px 1px 12px}#cards:empty:after{content:attr(data-empty);padding:20px 0;color:#98a6b8;font-size:12px}.card{flex-shrink:0;width:110px;border:1px solid var(--line);border-radius:7px;overflow:hidden}.card svg{width:100%;display:block;cursor:pointer}.card-actions{display:flex;justify-content:center;border-top:1px solid var(--line)}.card-actions button{padding:4px 8px;border:0;background:transparent}.export #mini{width:115px;margin:25px auto}.export #mini svg{width:100%}.export h3{font-size:26px;font-weight:500;line-height:1.6;margin:10px 0}.export .eyebrow{font-size:8px;letter-spacing:1.4px}.wide{width:100%;margin-top:10px;font-size:12px}.export hr{border:0;border-top:1px solid var(--line);margin:25px 0}.tip{padding:16px;background:#f1f5fa;border-radius:7px;margin-top:28px}.tip span{font-size:8px;letter-spacing:1px;color:#8596ad}.tip p{font-size:11px;line-height:1.8;color:#7387a2;margin-bottom:0}footer{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1px;color:#93a0b3;padding:24px 0}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--green);color:white;padding:12px 22px;border-radius:8px;opacity:0;pointer-events:none;transition:.2s;z-index:10}#toast.show{opacity:1}#barres{font-size:11px;display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}#barres button{font-size:10px;padding:4px 8px}#searchResults button{font-size:10px;margin:5px 4px 0 0}body.dark{filter:invert(.85) hue-rotate(150deg)}@media(min-width:1500px){.artboard{min-height:510px}.paper{width:320px}}@media(max-width:1150px){.workspace{grid-template-columns:230px minmax(340px,1fr)}.export{grid-column:1/-1;border-top:1px solid var(--line);display:flex;align-items:center;gap:15px;flex-wrap:wrap}.export #mini,.export h3,.export .hint,.export .eyebrow,.export hr,.tip{display:none}.export>*{max-width:190px}.export label{margin:0}.export .wide{margin:0}.status{display:none}}@media(max-width:720px){header{height:auto;padding:17px 5%;flex-wrap:wrap;gap:15px}nav{width:100%}nav button{flex:1;font-size:11px}main{padding:0 4%}.intro{padding:27px 0}.intro-note{display:none}h1{font-size:25px}.workspace{display:flex;flex-direction:column}.workspace>aside:first-child{border-right:0;border-bottom:1px solid var(--line)}.workspace>aside:first-child details{margin-top:10px}.editor{padding:20px 14px 0}.artboard{min-height:420px}.collection-bottom{flex-wrap:wrap}.collection-bottom input{flex-basis:100%}.export{border-left:0}.tools button{font-size:11px}.brand small{display:none}}
@media print{body{background:white}header,.intro,.workspace>aside,.canvas-head,.tools,.tool-options,.artboard,.canvas-foot,#barres,.collection-bottom,.collection .section-head button,footer{display:none!important}.workspace{display:block;border:0;box-shadow:none}.editor{padding:0}.collection{border:0}#cards{display:flex;flex-wrap:wrap;overflow:visible}.card{width:180px;border:0;break-inside:avoid}.card-actions{display:none}}
[hidden]{display:none!important}
.name-suggestions{padding:18px 0 8px}.suggestion-heading{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:12px;margin-bottom:11px}.suggestion-heading small{font-size:10px;color:#8293a8}#chordSuggestions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.chord-name{text-align:left;padding:12px 9px;min-width:0;background:#fbfcfe;display:flex;flex-direction:column;gap:9px;border-color:#dfe7f2}.chord-name small{font-size:9px;color:#8798af}.chord-name strong{font-size:17px;font-weight:600;overflow-wrap:anywhere}.chord-name span{font-size:9px;color:#8295af;line-height:1.5}.chord-name.recommended{background:#eaf1fc;border-color:#a2b9da}.chord-name.recommended small{color:#416ca7}.chord-name.selected{box-shadow:inset 0 0 0 1px var(--green);border-color:var(--green)}.chord-name:disabled{cursor:default;opacity:.48}.suggestion-empty{grid-column:1/-1;font-size:11px;color:#8496ad;margin:4px 0 10px}@media(max-width:720px){#chordSuggestions{grid-template-columns:repeat(2,minmax(0,1fr))}}@media print{.name-suggestions{display:none!important}}
#chordSuggestions{grid-template-columns:repeat(2,minmax(0,1fr))}.chord-name.empty-name{border:1px dashed #dfe7f2;border-radius:7px;background:transparent;color:#9caabd;cursor:default;min-height:105px}.chord-name strong{font-size:20px}.chord-name small{font-size:10px}
.theme-picker{margin:-4px 0 25px;padding-bottom:23px;border-bottom:1px solid var(--line)}.theme-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}.theme-heading .eyebrow{font-size:8px;margin-bottom:5px}.theme-heading h2{font-size:17px}.theme-heading>small{font-size:10px;color:#899ab2}.theme-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.theme-card{padding:8px;min-width:0;border:1px solid #dfe7f2;border-radius:9px;background:#fbfcfe;text-align:left;position:relative}.theme-card:hover{background:#f0f5fd;border-color:#9bb5d9}.theme-card.active-theme{border-color:var(--green);box-shadow:0 0 0 1px var(--green);background:#eaf1fc}.theme-thumb{height:112px;display:flex;justify-content:center;background:white;border-radius:5px;overflow:hidden}.theme-thumb svg{height:100%;width:auto;max-width:100%}.theme-label{display:flex;justify-content:space-between;gap:4px;align-items:center;margin-top:9px}.theme-label strong{font-size:12px;font-weight:600}.theme-label span{font-size:9px;color:#8197b4}.theme-card>small{display:block;margin-top:3px;font-size:9px;letter-spacing:.5px;color:#8d9fb8}.theme-notice{margin:12px 0 0;font-size:10px;color:#6c85a8;line-height:1.7}.theme-notice.locked{color:#a57c49}dialog{border:1px solid var(--line);border-radius:17px;padding:36px;max-width:420px;width:calc(100% - 32px);text-align:center;color:var(--ink);box-shadow:0 25px 100px #203f6833}dialog::backdrop{background:#152c4c70;backdrop-filter:blur(4px)}.dialog-close{position:absolute;right:12px;top:12px;border:0;font-size:20px;padding:3px 9px}.subscription-lock{font-size:30px;display:block;margin-bottom:20px}dialog h2{font-size:22px;line-height:1.6;margin:12px 0}dialog p:not(.eyebrow){font-size:12px;color:#7f90a6;line-height:1.9}.subscription-benefits{background:#edf3fc;padding:17px;border-radius:9px;font-size:12px;line-height:1.9;color:#52729e}.subscription-coming{font-size:10px!important}#backToPreview{margin-top:7px}@media(max-width:720px){.theme-heading>small{max-width:110px;line-height:1.6;text-align:right}.theme-cards{gap:6px}.theme-card{padding:6px}.theme-thumb{height:90px}.theme-label strong{font-size:11px}.theme-label span{font-size:8px}.theme-card>small{font-size:8px}}@media print{.theme-picker,dialog{display:none!important}.card:has(svg:not([data-theme="classic"])){display:none!important}}
.theme-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.theme-thumb{height:138px}.theme-label strong{font-size:14px}.theme-label{padding:0 3px}.theme-card>small{padding:0 3px}@media(max-width:720px){.theme-thumb{height:125px}}
#cards:empty:after{content:attr(data-empty)}.language-control{margin:0 0 0 5px;display:flex;align-items:center;gap:6px;color:var(--ink);flex-shrink:0}.language-control select{width:123px;padding:9px 6px;font-size:12px;background:#fcfdff}header{height:auto;min-height:80px;gap:18px;padding-top:15px;padding-bottom:15px}nav{flex-wrap:wrap;justify-content:flex-end}nav .status{font-size:10px;max-width:180px;line-height:1.5}.tools button{white-space:normal;line-height:1.5;min-width:0}.theme-heading>small{line-height:1.6;text-align:right;max-width:170px}.intro>div:first-child{max-width:75%}.intro h1{font-size:clamp(24px,2.5vw,32px)}.canvas-foot{gap:12px}.canvas-foot button{max-width:55%;white-space:normal}.collection-bottom button{white-space:normal}.collection-bottom{flex-wrap:wrap}.collection-bottom input{flex:1 1 160px}.export h3{overflow-wrap:anywhere}.theme-notice{min-height:34px}@media(max-width:1250px){nav .status{display:none}}@media(max-width:720px){nav{justify-content:flex-start;gap:7px}.language-control{margin-left:auto}.language-control select{width:125px}.intro>div:first-child{max-width:100%}.theme-heading>small{max-width:160px}.tools button{font-size:10px}.canvas-head h2{font-size:17px}.canvas-head{gap:12px}}

.brand .logo{width:42px;height:42px;background:transparent;margin-right:9px;display:block;line-height:0}.brand .logo img{display:block;width:42px;height:42px}.brand{letter-spacing:1.1px}button.primary{box-shadow:0 3px 8px #203f6810}button.primary:hover{background:#365f96;border-color:#365f96}.theme-card.active-theme{background:#edf3fd}.tools button.active{color:#203f68}.artboard{background-size:15px 15px}.language-control select:focus{border-color:#779bc9}
header{flex-wrap:wrap;row-gap:14px}.brand{order:1;flex-shrink:0}.brand .brand-name{font-size:18px;font-weight:650;letter-spacing:.4px}.header-actions{order:2;margin-left:auto}.primary-nav{order:3;flex:1 1 100%;justify-content:flex-start;border-top:1px solid #e3eaf3;padding-top:11px;gap:7px}.primary-nav a{color:#72839a;text-decoration:none;font-size:12px;padding:10px 16px;border-radius:7px;font-weight:500;line-height:1.5}.primary-nav a:hover{background:#edf3fc;color:#203f68}.primary-nav a[aria-current="page"]{color:#203f68;background:#e8f0fc;font-weight:650}.tool-main{padding-top:45px;max-width:1300px}.page-intro h1{margin:12px 0 15px}.page-intro>p:not(.eyebrow){color:#7b899c;line-height:1.9;font-size:14px}.coming-card{margin:35px 0 50px;padding:40px;text-align:center;border:1px solid #dfe7f2;border-radius:15px;background:white;box-shadow:0 10px 35px #203f6808}.coming-badge{display:inline-block;color:#4776b3;border:1px solid #d4e1f3;background:#f1f5fc;padding:6px 13px;border-radius:30px;font-size:11px}.fretboard-illustration{max-width:850px;margin:30px auto;opacity:.7}.fretboard-illustration svg{display:block;width:100%;height:auto}.coming-card h2{font-size:22px}.coming-card>p{max-width:600px;margin:16px auto;color:#8390a3;font-size:13px;line-height:1.9}.page-cta{display:inline-block;background:#4776b3;color:white;padding:12px 20px;border-radius:7px;text-decoration:none;font-size:12px;margin-top:17px}.page-cta:hover{background:#365f96}.author-card{display:flex;gap:35px;margin:35px 0 65px;background:white;border:1px solid #dfe7f2;border-radius:15px;padding:48px;max-width:950px;box-shadow:0 10px 35px #203f6808}.author-avatar{width:110px;height:110px;flex-shrink:0;border-radius:24px;background:#edf3fc;display:grid;place-items:center;color:#4776b3;font-size:34px;font-weight:500;letter-spacing:2px}.author-info{max-width:630px}.author-info h2{font-size:30px;font-weight:600}.author-info p{font-size:14px;line-height:2;color:#76869c}.author-info .author-role{font-size:12px;color:#4776b3;letter-spacing:1px;margin-top:6px}.author-info .social-pending{font-size:12px;color:#9aa7b8;margin-top:25px}.tool-main footer{border-top:1px solid #e1e7ef;padding-top:24px}@media(max-width:720px){header{gap:12px}.header-actions{width:100%;order:3;margin:0}.primary-nav{order:2;padding-top:10px;gap:3px;flex-wrap:nowrap}.primary-nav a{font-size:11px;padding:9px 10px;text-align:center;flex:1}.brand .brand-name{font-size:17px}.author-card{padding:27px;gap:20px;flex-direction:column}.author-avatar{width:80px;height:80px;border-radius:18px;font-size:27px}.coming-card{padding:27px 20px}.tool-main{padding-top:30px}.fretboard-illustration{margin:25px auto}}

.maker-title-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.maker-title-row h1{margin-right:0}.export-counter{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border:1px solid #c7daed;border-radius:999px;background:#edf5fc;color:#315f8b;font-size:12px;font-weight:600;white-space:nowrap}.export-counter svg{flex-shrink:0}@media(max-width:600px){.maker-title-row{gap:0;margin-bottom:14px}.export-counter{margin-top:4px}}

.premium-text{color:#7d8798!important}.premium-text .theme-label strong,.premium-text>small{color:#7d8798}.check.premium-text{font-weight:400}.primary.premium-text{color:#d5deea!important}.theme-card.premium-text.active-theme{border-color:#4776b3}

.paper.transparent-preview,#mini.transparent-preview{background-color:#fff;background-image:linear-gradient(45deg,#e1e6ed 25%,transparent 25%),linear-gradient(-45deg,#e1e6ed 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e1e6ed 75%),linear-gradient(-45deg,transparent 75%,#e1e6ed 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}

.export #mini svg,.card svg{height:auto;display:block}

.appearance-settings{width:100%;margin:8px 0 22px}.appearance-settings .theme-picker{padding:12px 0;margin:10px 0 16px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.appearance-settings .theme-heading{display:block;margin-bottom:10px}.appearance-settings .theme-heading h3{margin:0 0 6px;font-size:13px}.appearance-settings .theme-heading small{font-size:10px;line-height:1.5;display:block}.appearance-settings .theme-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.appearance-settings .theme-card{padding:5px}.appearance-settings .theme-thumb{height:72px}.appearance-settings .theme-label{margin-top:6px;gap:2px}.appearance-settings .theme-label strong{font-size:11px}.appearance-settings .theme-label span{font-size:9px}.appearance-settings .theme-card>small{display:none}.appearance-settings .theme-notice{font-size:10px;line-height:1.6;margin:8px 0 0}.export #mini{margin:18px auto}.paper{margin-inline:auto}@media(max-width:1150px){.appearance-settings{max-width:none;flex:1 0 100%}.appearance-settings .theme-cards{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:600px){.appearance-settings .theme-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}

.custom-tuning[hidden]{display:none}.custom-tuning-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.custom-tuning-grid label{margin:0;font-size:11px}.custom-tuning-grid input{margin-top:5px;text-align:center;padding:9px 4px}.field-error{font-size:11px;color:#a74444;line-height:1.6}.intro{align-items:center}.intro h1{margin-top:0}.artboard{min-height:440px}.canvas-head{margin-top:0}

.audition-controls{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap}.audition-label{font-size:12px;color:#7d899b;margin-right:3px}.audition-controls button{font-size:12px;padding:8px 11px}.canvas-head{gap:12px;flex-wrap:wrap}@media(max-width:600px){.audition-controls{justify-content:flex-start}}

.appearance-settings{width:100%;margin:24px 0 0}.appearance-settings .theme-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.appearance-settings .theme-heading h3{margin:0 0 6px;font-size:13px}.export>.check{margin:12px 0 16px}.export>.check+label:not(.check){margin-top:24px}

.export>.theme-picker{width:100%;padding:0 0 18px;margin:0 0 18px;border:0;border-bottom:1px solid var(--line)}.export .theme-heading{display:block;margin-bottom:10px}.export .theme-heading h3{font-size:13px;margin:0}.export .theme-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.export .theme-card{padding:5px}.export .theme-thumb{height:72px}.export .theme-label{margin-top:6px;gap:2px}.export .theme-label strong{font-size:11px}.export .theme-label span{font-size:9px}

.seo-guide{max-width:1100px;margin:48px auto 24px;padding:24px;border-top:1px solid #dce4ef;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}.seo-guide h2{font-size:17px;line-height:1.5}.seo-guide p{font-size:14px;line-height:1.8;color:#53647a}.locale-links{display:flex;flex-wrap:wrap;gap:14px;padding:16px 0}.locale-links a{color:inherit;font-size:13px}@media(max-width:800px){.seo-guide{grid-template-columns:1fr;gap:12px}}