:root{color-scheme:light;--font-ui: "Asta Sans", system-ui, sans-serif;--font-display: "Space Grotesk", "Asta Sans", sans-serif;--color-bg: #fffbeb;--color-surface: #ffffff;--color-text: #0f172a;--color-text-soft: #6b6558;--color-border: #f5e1be;--color-border-soft: #ece7db;--color-primary: #b45309;--color-primary-tint: #fdf0dc;--color-on-primary: #ffffff;--color-secondary: #9a3412;--color-destructive: #dc2626;--color-ring: #b45309;--shadow-soft: rgba(43, 39, 33, .06);--shadow-medium: rgba(43, 39, 33, .08)}body{font-family:var(--font-ui);margin:0;background:var(--color-bg);color:var(--color-text)}body:before{--bg-size: max( calc(155vh - 130px) , 100vw);content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;background:url(/assets/bg-CVOZgRci.jpg) 50% calc(105px - .356 * var(--bg-size)) / var(--bg-size) auto no-repeat;opacity:.35;pointer-events:none}#root{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh}:focus-visible{outline:none;box-shadow:0 0 0 3px #b4530973;box-shadow:0 0 0 3px color-mix(in srgb,var(--color-ring) 45%,transparent);border-radius:4px}@media(prefers-reduced-motion:reduce){.stage,.page-nav-btn,.mode-btn,.bpm-step,.metro-btn,.btn-pill{transition:none!important}}.page-nav{display:flex;gap:6px;margin-top:clamp(8px,2.7vh,24px);margin-bottom:8px}.page-nav-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;box-sizing:border-box;padding:0 18px;border-radius:100px;border:1px solid var(--color-border);background:#ffffffb3;color:var(--color-text-soft);font-size:13px;font-family:var(--font-ui);cursor:pointer;transition:border-color .15s,color .15s}.page-nav-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}.page-nav-btn.active{border-color:var(--color-primary);color:var(--color-primary);background:var(--color-primary-tint);font-weight:600}.chord-chart{display:flex;flex-direction:column;align-items:center;width:min(96vw,1000px);padding:8px 0 32px}.chord-sheet{width:100%;box-sizing:border-box;margin-top:12px;padding:28px 32px 36px;background:#ffffffb3;color:var(--color-text);border:1px solid var(--color-border);border-radius:16px;box-shadow:0 8px 24px var(--shadow-medium)}.chord-sheet-header{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:6px 16px;padding-bottom:12px}.chord-sheet-title{margin:0;font-family:var(--font-ui);font-size:28px;font-weight:800;letter-spacing:-.02em}.chart-scroll{margin-top:20px;overflow-x:auto}.chart-table{display:grid;grid-template-columns:100px repeat(var(--cols),minmax(112px,1fr));min-width:calc(100px + var(--cols) * 112px)}.chart-row{display:contents}.chart-head-blank{border-bottom:1px solid var(--color-border-soft)}.chart-head{margin:0;padding:4px 6px 10px;color:var(--color-text);font-family:var(--font-display);font-size:20px;font-weight:700;text-align:center;border-bottom:1px solid var(--color-border-soft)}.chart-root{display:flex;align-items:center;justify-content:center;border-top:1px solid var(--color-border-soft);font-family:var(--font-display);font-size:22px;font-weight:700;text-align:center;line-height:1.1;white-space:nowrap}.chart-cell{padding:10px 6px 12px;border-top:1px solid var(--color-border-soft);text-align:center}.chart-item-name{margin-bottom:4px;font-family:var(--font-display);font-size:14px;font-weight:700}.chart-diagram{width:100%;max-width:132px;margin:0 auto}@media(max-width:560px){.chord-sheet{padding:20px 14px 26px}.chord-sheet-title{font-size:22px}}.stage-wrapper{display:flex;justify-content:center;overflow:hidden;width:100%}.stage{display:flex;align-items:center;justify-content:center;width:100%;transition:transform .35s cubic-bezier(.4,0,.2,1)}.chord-card{flex:0 0 clamp(140px,30%,280px);min-width:0;text-align:center;padding:clamp(.6rem,1.5vh,1.35rem) 1rem;visibility:hidden;min-height:160px}.chord-card .chord-name{font-family:var(--font-display);font-size:clamp(28px,5vw,44px);font-weight:500;color:var(--color-text);line-height:1}.chord-card .chord-label{font-size:13px;color:var(--color-text-soft);margin-top:8px}#card-prev{opacity:.45}#card-next{opacity:.55}#card-current{display:flex;flex-direction:column;justify-content:center;min-height:clamp(240px,40vh,360px);background:#ffffffb3;border:1px solid var(--color-border);border-radius:16px;box-shadow:0 8px 24px var(--shadow-soft);opacity:1;visibility:visible}#card-current .chord-name{font-weight:700;font-size:min(clamp(56px,11vw,96px),max(44px,10.7vh));color:var(--color-primary);min-height:1em}#card-current .chord-label{font-size:16px;color:var(--color-text-soft);margin-top:clamp(6px,1.2vh,11px);line-height:1.3;min-height:1.3em}.chord-card-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:1em;padding:.5rem 0 .75rem}.chord-card-empty-icon{color:var(--color-text-soft);opacity:.7}.chord-card-empty-text{font-size:14px;line-height:1.6;color:var(--color-text-soft)}.chord-diagram-hidden{display:none}.timer-bar-bg-hidden{visibility:hidden}.chord-diagram{width:100%;max-width:min(135px,max(96px,15vh));margin:clamp(6px,1.35vh,12px) auto 0;background:var(--color-surface);border:1px solid var(--color-border-soft);border-radius:8px;padding:7px 5px 4px;box-sizing:border-box}.timer-bar-bg{width:min(200px,70%);height:5px;background:var(--color-border-soft);border-radius:2px;overflow:hidden;margin:clamp(10px,2.4vh,1.35rem) auto 0}.timer-bar{height:100%;width:100%;background:var(--color-primary);border-radius:2px}.controls{display:flex;align-items:center;gap:10px;margin-top:clamp(10px,1.7vh,1.5rem)}.btn-pill{display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;box-sizing:border-box;padding:0 18px;border-radius:100px;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text-soft);font-size:13px;font-family:var(--font-ui);cursor:pointer;white-space:nowrap;transition:border-color .15s,color .15s}.btn-pill:hover{border-color:var(--color-primary);color:var(--color-primary)}.btn-pill-icon{flex-shrink:0}.btn-pill-main{border:none;background:var(--color-primary);color:var(--color-on-primary);font-weight:600;padding:0;width:112px;justify-content:center;transition:opacity .15s}.btn-pill-main:hover{opacity:.88;color:var(--color-on-primary)}.count{font-size:14px;color:var(--color-text-soft);margin-top:12px}.mode-control{display:flex;flex-wrap:wrap;justify-content:center;gap:22px;margin-top:20px;margin-bottom:4px}.mode-btn{box-sizing:border-box;padding:12px 4px 13px;border:none;border-bottom:3px solid transparent;background:none;color:var(--color-text-soft);font-size:13px;font-weight:700;font-family:var(--font-ui);cursor:pointer;transition:border-color .15s,color .15s}.mode-btn:hover{color:var(--color-primary)}.mode-btn.active{color:var(--color-primary);border-bottom:3px solid var(--color-primary)}.chord-pool-picker{position:relative;display:inline-flex;align-items:center;margin-top:clamp(8px,2.2vh,20px);margin-bottom:4px}.chord-pool-select{-moz-appearance:none;appearance:none;-webkit-appearance:none;min-height:44px;box-sizing:border-box;padding:0 38px 0 18px;border-radius:100px;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-primary);font-weight:400;font-size:13px;font-family:var(--font-ui);cursor:pointer}.chord-pool-select:focus-visible{outline:none;box-shadow:none}.chord-pool-picker-icon{position:absolute;right:16px;top:50%;transform:translateY(-50%);color:var(--color-text-soft);pointer-events:none}.speed-control{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:clamp(8px,1.8vh,16px)}.bpm-step{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:100px;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text-soft);cursor:pointer;transition:border-color .15s,color .15s}.bpm-step:hover:not(:disabled){border-color:var(--color-primary);color:var(--color-primary)}.bpm-step:disabled{opacity:.4;cursor:default}.speed-bpm{min-width:84px;text-align:center;font-size:13px;color:var(--color-text-soft)}.speed-bpm span{font-family:var(--font-display);color:var(--color-primary);font-weight:700}.metro-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;box-sizing:border-box;margin-left:6px;padding:0;border-radius:100px;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text-soft);cursor:pointer;transition:border-color .15s,color .15s}.metro-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}.metro-arm{transform-origin:12px 19px;transform:rotate(-18deg)}.metro-btn.active .metro-body{fill:currentColor;fill-opacity:.15}.metro-btn.active .metro-arm{animation:metro-swing calc(var(--beat-ms) * 1ms) ease-in-out infinite alternate}@keyframes metro-swing{0%{transform:rotate(-22deg)}to{transform:rotate(22deg)}}@media(prefers-reduced-motion:reduce){.metro-btn.active .metro-arm{animation:none}}.metro-btn.active{border-color:var(--color-primary);color:var(--color-primary);background:var(--color-primary-tint)}