:root{--bg: #F4F6FA;--bg-soft: #E8ECF3;--paper: #FFFFFF;--paper-soft: #F7F9FC;--ink: #1F2330;--ink-soft: #4D5263;--ink-faint: #8A8FA0;--rule: #DEE3EC;--rule-soft: #EBEFF5;--coral: #FF6B6B;--coral-deep: #E84A4A;--coral-light: #FFD0D0;--mint: #4DC07A;--mint-deep: #2A8050;--mint-bg: rgba(77, 192, 122, .2);--blue: #4DABF7;--blue-deep: #1971C2;--blue-bg: rgba(77, 171, 247, .2);--red: #FF6B6B;--red-deep: #D63A3A;--red-bg: rgba(255, 107, 107, .2);--purple: #B47AEA;--purple-deep: #7C45BA;--purple-bg: rgba(180, 122, 234, .22);--peach: #FFAB76;--pink: #FF8FAB;--pink-deep: #E85F8C;--shadow-soft: 0 2px 6px rgba(42, 37, 34, .05), 0 12px 28px rgba(42, 37, 34, .09);--shadow-button: 0 4px 0 rgba(214, 58, 58, .7);--shadow-button-press: 0 1px 0 rgba(214, 58, 58, .7)}*{box-sizing:border-box;margin:0;padding:0}html{background:var(--bg);min-height:100%}body{color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100vh;position:relative;overflow-x:hidden}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:-1;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'><circle cx='50' cy='80' r='32' fill='%234DC07A' opacity='0.35'/><circle cx='38' cy='68' r='8' fill='%23FFFFFF' opacity='0.55'/><circle cx='200' cy='60' r='26' fill='%23FF6B6B' opacity='0.35'/><circle cx='191' cy='51' r='7' fill='%23FFFFFF' opacity='0.55'/><circle cx='110' cy='160' r='28' fill='%23B47AEA' opacity='0.35'/><circle cx='100' cy='150' r='7' fill='%23FFFFFF' opacity='0.55'/><circle cx='260' cy='180' r='22' fill='%234DABF7' opacity='0.35'/><circle cx='253' cy='173' r='6' fill='%23FFFFFF' opacity='0.55'/><circle cx='40' cy='220' r='20' fill='%23FF8FAB' opacity='0.35'/><circle cx='34' cy='213' r='6' fill='%23FFFFFF' opacity='0.55'/><circle cx='180' cy='250' r='24' fill='%23FFAB76' opacity='0.35'/><circle cx='171' cy='241' r='7' fill='%23FFFFFF' opacity='0.55'/><circle cx='240' cy='30' r='14' fill='%234DC07A' opacity='0.35'/><circle cx='235' cy='26' r='4' fill='%23FFFFFF' opacity='0.55'/><circle cx='90' cy='40' r='16' fill='%23B47AEA' opacity='0.35'/><circle cx='84' cy='35' r='5' fill='%23FFFFFF' opacity='0.55'/><circle cx='300' cy='270' r='18' fill='%234DABF7' opacity='0.35'/><circle cx='294' cy='264' r='5' fill='%23FFFFFF' opacity='0.55'/><circle cx='160' cy='110' r='12' fill='%23FF6B6B' opacity='0.35'/><circle cx='156' cy='106' r='4' fill='%23FFFFFF' opacity='0.55'/><circle cx='15' cy='160' r='15' fill='%23FF8FAB' opacity='0.35'/><circle cx='10' cy='155' r='5' fill='%23FFFFFF' opacity='0.55'/></svg>");background-size:320px 320px;opacity:.5;animation:bubble-rise 28s linear infinite}@keyframes bubble-rise{0%{background-position:0 0}to{background-position:0 -320px}}body:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:-2;background-image:radial-gradient(circle at 5% 5%,rgba(77,192,122,.18) 0,transparent 30%),radial-gradient(circle at 95% 95%,rgba(180,122,234,.18) 0,transparent 30%)}button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}.app{min-height:100vh;max-width:920px;margin:0 auto;padding:56px 28px 80px}.brand{display:flex;align-items:center;gap:14px;margin-bottom:4px}.brand-logo{width:56px;height:56px;flex-shrink:0;filter:drop-shadow(0 4px 12px rgba(231,95,140,.3));transition:transform .25s cubic-bezier(.34,1.56,.64,1);transform-origin:28px 28px}.brand-logo:hover{transform:rotate(-6deg) scale(1.06)}@keyframes bob{0%,to{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-2px) rotate(3deg)}}.brand-mark{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:44px;font-weight:600;letter-spacing:-1.2px;color:var(--ink);line-height:1}.brand-mark em{font-style:italic;background:linear-gradient(135deg,var(--coral) 0%,var(--pink-deep) 50%,var(--purple) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding:0 2px}.brand-tag{margin-left:auto;padding:7px 16px;background:var(--mint-bg);border:1.5px solid var(--mint);border-radius:999px;font-size:11px;font-weight:600;color:var(--mint-deep);letter-spacing:.4px;text-transform:uppercase}.tagline{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-style:italic;font-size:19px;color:var(--ink-soft);margin:16px 0 36px;letter-spacing:.1px}.card{background:var(--paper);border:1.5px solid var(--rule);border-radius:24px;padding:34px 36px 36px;box-shadow:var(--shadow-soft);position:relative}.card:before{content:"";position:absolute;top:-2px;left:32px;right:32px;height:4px;background:linear-gradient(90deg,var(--mint) 0%,var(--coral) 35%,var(--purple) 70%,var(--blue) 100%);border-radius:999px}.card-prompt{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:22px;font-weight:600;color:var(--ink);margin-bottom:22px;display:flex;align-items:center;gap:10px}.card-prompt:before{content:"♪";color:var(--coral);font-size:24px;line-height:1;text-shadow:0 2px 8px rgba(255,107,107,.4)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 24px}.field{display:flex;flex-direction:column;gap:7px}.field.full{grid-column:1 / -1}.field label{font-size:12px;font-weight:600;color:var(--ink-soft);letter-spacing:.3px}.field .helper{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-style:italic;font-size:13px;color:var(--ink-faint);margin-top:-3px;margin-bottom:4px;line-height:1.4}.field input,.field select,.field textarea{background:var(--paper-soft);border:1.5px solid var(--rule);border-radius:14px;padding:11px 14px;font-size:15px;outline:none;transition:border-color .15s,background .15s,box-shadow .15s}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--coral);background:var(--paper);box-shadow:0 0 0 4px #ff6b6b26}.field textarea{min-height:60px;resize:vertical;font-family:inherit}.key-row{display:flex;align-items:center;gap:14px;margin-bottom:10px}.key-row:last-child{margin-bottom:0}.key-row-label{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-faint);width:50px;flex-shrink:0}.key-grid{display:flex;gap:6px;flex-wrap:wrap}.key-chip{font-family:Inter,sans-serif;font-size:13px;font-weight:700;letter-spacing:.2px;padding:8px 12px;min-width:42px;background:var(--paper-soft);border:1.5px solid var(--rule);border-radius:999px;color:var(--ink-soft);transition:background .15s,color .15s,border-color .15s,transform .07s,box-shadow .15s}.key-chip:hover:not(.active):not(:disabled){background:var(--mint-bg);border-color:var(--mint);color:var(--mint-deep);transform:translateY(-1px)}.key-chip.minor{font-style:italic}.key-chip.active{background:linear-gradient(135deg,var(--coral),var(--pink-deep));border-color:var(--coral-deep);color:#fff;box-shadow:0 3px 8px #ff6b6b59;transform:translateY(-1px)}.key-chip.active.minor{background:linear-gradient(135deg,var(--purple) 0%,var(--blue-deep) 100%);border-color:var(--purple-deep);box-shadow:0 3px 8px #7c45ba59}.key-chip:disabled{opacity:.5;cursor:not-allowed}.chord-preview{display:flex;gap:10px;flex-wrap:wrap}.chord-preview .pill{padding:10px 14px;border-radius:16px;text-align:center;min-width:60px;transition:transform .18s,box-shadow .18s;border:2px solid}.chord-preview .pill:hover{transform:translateY(-2px) rotate(-1.5deg)}.chord-preview .pill .chord{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:18px;font-weight:700;line-height:1.1;display:block}.chord-preview .pill .roman{font-size:10px;font-style:italic;opacity:.85;letter-spacing:.5px}.chord-preview .pill.roman-I{background:var(--mint-bg);border-color:var(--mint)}.chord-preview .pill.roman-I .chord,.chord-preview .pill.roman-I .roman{color:var(--mint-deep)}.chord-preview .pill.roman-IV{background:var(--blue-bg);border-color:var(--blue)}.chord-preview .pill.roman-IV .chord,.chord-preview .pill.roman-IV .roman{color:var(--blue-deep)}.chord-preview .pill.roman-V{background:var(--red-bg);border-color:var(--red)}.chord-preview .pill.roman-V .chord,.chord-preview .pill.roman-V .roman{color:var(--red-deep)}.chord-preview .pill.roman-vi,.chord-preview .pill.roman-i{background:var(--purple-bg);border-color:var(--purple)}.chord-preview .pill.roman-vi .chord,.chord-preview .pill.roman-vi .roman,.chord-preview .pill.roman-i .chord,.chord-preview .pill.roman-i .roman{color:var(--purple-deep)}.chord-preview .pill.roman-iv{background:var(--blue-bg);border-color:var(--blue)}.chord-preview .pill.roman-iv .chord,.chord-preview .pill.roman-iv .roman{color:var(--blue-deep)}.chord-preview .pill.roman-VI{background:var(--mint-bg);border-color:var(--mint)}.chord-preview .pill.roman-VI .chord,.chord-preview .pill.roman-VI .roman{color:var(--mint-deep)}.submit{margin-top:28px;width:100%;background:linear-gradient(135deg,var(--coral) 0%,var(--pink-deep) 100%);color:#fff;font-size:16px;font-weight:700;letter-spacing:.4px;padding:17px;border-radius:999px;box-shadow:var(--shadow-button);transition:transform .07s,box-shadow .07s,filter .15s}.submit:hover:not(:disabled){filter:brightness(1.06)}.submit:active:not(:disabled){transform:translateY(3px);box-shadow:var(--shadow-button-press)}.submit:disabled{background:var(--rule);color:var(--ink-faint);cursor:not-allowed;box-shadow:none}.error{margin-top:18px;padding:14px 18px;background:var(--red-bg);border:1.5px solid var(--coral-light);border-radius:14px;color:var(--coral-deep);font-size:14px}.progress-panel{margin-top:30px;padding:30px 34px;background:var(--paper);border:1.5px solid var(--rule);border-radius:22px;box-shadow:var(--shadow-soft)}.progress-status{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-style:italic;font-size:19px;color:var(--coral-deep);margin-bottom:16px;text-align:center;letter-spacing:.2px}.progress-status:after{content:"";animation:dots 1.4s steps(4,end) infinite}.progress-track{position:relative;height:12px;background:var(--bg-soft);border-radius:999px;overflow:hidden;border:1px solid var(--rule-soft)}.progress-fill{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,var(--mint) 0%,var(--peach) 25%,var(--coral) 50%,var(--purple) 75%,var(--blue) 100%);background-size:200% 100%;border-radius:999px;transition:width .45s ease-out;box-shadow:0 0 16px #ff6b6b66;animation:shimmer 3s linear infinite}@keyframes shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}.progress-pct{margin-top:10px;font-family:JetBrains Mono,monospace;font-size:11px;letter-spacing:1.2px;color:var(--ink-faint);text-align:right}@keyframes dots{0%,20%{content:""}40%{content:"."}60%{content:".."}80%,to{content:"..."}}.sheet{margin-top:30px;background:var(--paper);border:1.5px solid var(--rule);border-radius:24px;padding:46px 52px 36px;box-shadow:var(--shadow-soft);position:relative}.sheet:before{content:"";position:absolute;top:-2px;left:38px;right:38px;height:4px;background:linear-gradient(90deg,var(--mint),var(--mint),var(--blue),var(--purple),var(--coral));border-radius:999px}.unverified{margin:0 0 22px;padding:16px 20px;background:var(--red-bg);border:1.5px solid var(--coral-light);border-radius:16px;font-size:14px;color:var(--coral-deep);line-height:1.5}.unverified b{display:block;margin-bottom:4px;letter-spacing:.3px}.sheet-header{border-bottom:2px dashed var(--rule);padding-bottom:22px;margin-bottom:26px}.sheet-title{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:38px;font-weight:600;letter-spacing:-.6px;margin-bottom:4px;color:var(--ink);line-height:1.05}.sheet-artist{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-style:italic;font-size:18px;color:var(--ink-soft)}.sheet-meta{display:flex;gap:22px;flex-wrap:wrap;margin-top:14px;font-size:13px;color:var(--ink-soft)}.sheet-meta span b{color:var(--coral-deep);font-weight:700}.chord-box{display:flex;gap:14px;flex-wrap:wrap;padding:22px;background:linear-gradient(135deg,var(--paper-soft) 0%,var(--bg) 100%);border-radius:20px;margin-bottom:28px;align-items:stretch}.chord-box .pill{text-align:center;padding:16px 20px;border-radius:18px;min-width:76px;transition:transform .18s;border:2.5px solid}.chord-box .pill:hover{transform:translateY(-3px) rotate(-2deg)}.chord-box .pill .chord-name{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:28px;font-weight:700;display:block;line-height:1;margin-bottom:4px}.chord-box .pill .roman{font-size:11px;font-style:italic;letter-spacing:1px;opacity:.9}.chord-box .pill.roman-I{background:var(--mint-bg);border-color:var(--mint)}.chord-box .pill.roman-I .chord-name,.chord-box .pill.roman-I .roman{color:var(--mint-deep)}.chord-box .pill.roman-IV{background:var(--blue-bg);border-color:var(--blue)}.chord-box .pill.roman-IV .chord-name,.chord-box .pill.roman-IV .roman{color:var(--blue-deep)}.chord-box .pill.roman-V{background:var(--red-bg);border-color:var(--red)}.chord-box .pill.roman-V .chord-name,.chord-box .pill.roman-V .roman{color:var(--red-deep)}.chord-box .pill.roman-vi,.chord-box .pill.roman-i{background:var(--purple-bg);border-color:var(--purple)}.chord-box .pill.roman-vi .chord-name,.chord-box .pill.roman-vi .roman,.chord-box .pill.roman-i .chord-name,.chord-box .pill.roman-i .roman{color:var(--purple-deep)}.chord-box .pill.roman-iv{background:var(--blue-bg);border-color:var(--blue)}.chord-box .pill.roman-iv .chord-name,.chord-box .pill.roman-iv .roman{color:var(--blue-deep)}.chord-box .pill.roman-VI{background:var(--mint-bg);border-color:var(--mint)}.chord-box .pill.roman-VI .chord-name,.chord-box .pill.roman-VI .roman{color:var(--mint-deep)}.chord-box .progression-blurb{flex:1;min-width:240px;padding:10px 0 10px 22px;border-left:2px dashed var(--rule);font-size:13.5px;color:var(--ink-soft);align-self:center;line-height:1.6}.chord-box .progression-blurb b{color:var(--coral-deep);font-family:JetBrains Mono,monospace;font-size:12px;letter-spacing:.5px;display:inline-block;margin-top:4px;padding:3px 8px;background:var(--red-bg);border-radius:6px}.section{margin-bottom:24px}.section-label{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--ink);padding:4px 0 8px;margin-bottom:10px;display:flex;align-items:center;gap:10px;border-bottom:1.5px dashed var(--rule)}.section-label:before{content:"♪";color:var(--coral);font-size:18px;letter-spacing:0}.section.instrumental .section-label:before{content:"♬";color:var(--purple)}.chord-lines{font-family:JetBrains Mono,Courier New,monospace;font-size:14px;line-height:1.4;white-space:pre;overflow-x:auto}.chord-lines .chord-row{color:var(--coral-deep);font-weight:700}.chord-lines .lyric-row{color:var(--ink);margin-bottom:10px}.chord-lines .lyric-row:last-child{margin-bottom:0}.teaching-note{margin-top:28px;padding:22px 26px;background:linear-gradient(135deg,#4dc07a29,#ffab7624);border:1.5px solid var(--mint);border-radius:18px;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:15.5px;font-style:italic;line-height:1.65;color:var(--ink-soft)}.teaching-note:before{content:"🎓 Teaching note";display:block;font-style:normal;font-weight:700;color:var(--mint-deep);font-family:Inter,sans-serif;font-size:11px;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:8px}.sources{margin-top:24px;padding-top:16px;border-top:1px dashed var(--rule);font-size:12px;color:var(--ink-soft)}.sources-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--blue-deep)}.sources-label:before{content:"🔗 "}.sources ul{list-style:none;margin:8px 0 0;padding:0}.sources li{padding:3px 0}.sources a{color:var(--ink-soft);text-decoration:none;border-bottom:1px dotted var(--rule);transition:color .15s,border-color .15s}.sources a:hover{color:var(--blue-deep);border-bottom-color:var(--blue)}.actions{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-top:26px;flex-wrap:wrap}.action-btn{padding:11px 22px;color:#fff;font-size:13px;font-weight:700;letter-spacing:.4px;border-radius:999px;transition:filter .15s,transform .07s,box-shadow .07s;cursor:pointer;border:none;font-family:inherit}.action-btn:hover{filter:brightness(1.08)}.action-btn:active{transform:translateY(2px)}.action-btn.print{background:linear-gradient(135deg,var(--ink),var(--ink-soft));box-shadow:0 3px #1f233080}.action-btn.print:active{box-shadow:0 1px #1f233080}.action-btn.download{background:linear-gradient(135deg,var(--blue),var(--purple));box-shadow:0 3px #7c45ba66}.action-btn.download:active{box-shadow:0 1px #7c45ba66}.action-btn.share{background:linear-gradient(135deg,var(--coral),var(--pink-deep));box-shadow:0 3px #d63a3a80}.action-btn.share:active{box-shadow:0 1px #d63a3a80}.action-toast{margin-left:6px;padding:6px 14px;background:var(--mint-bg);border:1.5px solid var(--mint);color:var(--mint-deep);border-radius:999px;font-size:12px;font-weight:600;animation:toast-in .25s ease-out}@keyframes toast-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.footer-credit{margin-top:56px;text-align:center;font-size:11px;color:var(--ink-faint);letter-spacing:1.5px;text-transform:uppercase;font-weight:600;display:flex;justify-content:center;align-items:center;gap:10px}.footer-credit:before,.footer-credit:after{content:"";flex:0 1 60px;height:2px;background:linear-gradient(90deg,transparent,var(--rule),transparent)}@media print{body{background:#fff}.app{max-width:100%;padding:0}.brand,.tagline,.card,.actions,.footer-credit,.progress-panel,.error{display:none!important}.sheet{border:none;box-shadow:none;padding:0;margin:0;background:#fff;border-radius:0}.sheet:before{display:none}.chord-box,.teaching-note,.chord-box .pill{-webkit-print-color-adjust:exact;print-color-adjust:exact}}@media (max-width: 720px){.app{padding:36px 18px 60px}.brand-mark{font-size:32px}.brand-note{font-size:28px}.brand-tag{display:none}.form-grid{grid-template-columns:1fr}.card,.sheet{padding:28px 22px 30px}.sheet-title{font-size:28px}}