*,:after,:before{box-sizing:border-box}body,html{margin:0;padding:0}:root{--bg-pure:#fff;--ink-black:#111;--ink-soft:#444;--ink-faint:#888;--line-gray:#e8e8e8;--line-gray-strong:#d4d4d4;--surface-pale:#fafafa;--grid-line:hsla(0,0%,91%,.3);--brand-green:#0f6a3d;--brand-green-dark:#0a5230;--ticket-dark:#5dc291;--ticket-light:#8ce2b7;--ticket-bg:#d6f3e3;--key-white:#fdfdfd;--key-white-edge:#e0e0e0;--key-black:#1a1a1a;--color-bg:var(--bg-pure);--color-surface-1:var(--bg-pure);--color-surface-2:var(--surface-pale);--color-text:var(--ink-black);--color-text-soft:var(--ink-soft);--color-text-faint:var(--ink-faint);--color-text-inverse:var(--bg-pure);--color-line:var(--line-gray);--color-line-strong:var(--line-gray-strong);--color-brand:var(--brand-green);--color-brand-dark:var(--brand-green-dark);--color-brand-soft:var(--ticket-light);--color-brand-shadow:rgba(15,106,61,.12);--color-accent:var(--ticket-dark);--color-accent-soft:var(--ticket-bg);--color-decoration:var(--ticket-light);--color-link:var(--color-brand);--color-link-hover:var(--color-brand-dark);--color-speaker-ron:var(--brand-green);--color-speaker-rin:var(--ink-black);--color-state-playing:var(--brand-green);--color-state-highlight:var(--ticket-light);--font-en:"Outfit",sans-serif;--font-jp:"Noto Sans JP",sans-serif;--font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Monaco,monospace;--font-display:var(--font-en);--font-body:var(--font-jp);--text-display-xl:4rem;--text-display-lg:2.5rem;--text-display:1.75rem;--text-display-sm:1.25rem;--text-body-lg:1.1rem;--text-body:1rem;--text-body-sm:.95rem;--text-label:.8rem;--text-caption:.7rem;--text-micro:.65rem;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-7:2rem;--space-8:2.5rem;--space-9:3rem;--space-10:4rem;--space-11:5rem;--radius-sm:2px;--radius-md:4px;--radius-lg:8px;--radius-xl:12px;--radius-pill:999px;--shadow-subtle:0 4px 12px rgba(0,0,0,.03);--shadow-card:4px 4px 0 var(--line-gray);--shadow-offset:2px 2px 0 var(--ink-black);--shadow-float:0 -8px 24px rgba(0,0,0,.06);--shadow-key:0 10px 20px rgba(0,0,0,.1),inset 0 2px 0 hsla(0,0%,100%,.2);--app-max-width:1600px;--sidebar-width:280px;--sidebar-width-md:240px;--main-pad-x:var(--space-10);--main-pad-y:var(--space-9);--tools-panel-h:220px;--grid-size:40px}body,html{background:var(--bg-pure)}body{color:var(--color-text);font-family:var(--font-jp);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:hidden;min-height:100vh}::-moz-selection{background:var(--ticket-light);color:var(--ink-black)}::selection{background:var(--ticket-light);color:var(--ink-black)}ruby{ruby-position:over}rt{font-size:.55em;color:var(--brand-green);font-weight:700;letter-spacing:.05em}h1,h2,h3,h4{font-family:var(--font-jp);color:var(--ink-black);line-height:1.3;font-weight:900;margin-top:2em;margin-bottom:.6em;letter-spacing:.02em}h1{font-size:var(--text-display);margin-top:0}h2{font-family:var(--font-jp);font-size:1.5rem;font-weight:900;color:var(--ink-black);letter-spacing:.04em;margin:var(--space-11) 0 var(--space-8);display:flex;align-items:center;gap:var(--space-4)}h2:after{content:"";flex-grow:1;height:2px;background:var(--ink-black)}h2>a,h3>a,h4>a{text-decoration:none;font:inherit;background:none}h2>a,h2>a:hover,h3>a,h3>a:hover,h4>a,h4>a:hover{color:inherit;border:none}h3{font-size:var(--text-display-sm);font-weight:700}p{margin:0 0 1.2em;color:var(--ink-soft);line-height:1.8}a{color:var(--brand-green);text-decoration:none;border-bottom:1px solid rgba(15,106,61,.2);transition:border-color .15s ease,color .15s ease}a:hover{color:var(--brand-green-dark);border-bottom-color:var(--brand-green)}b,strong{color:var(--ink-black);font-weight:700}em,i{font-style:italic}code{font-family:var(--font-mono);font-size:.88em;background:var(--ticket-bg);color:var(--brand-green-dark);padding:.1em .4em;border-radius:var(--radius-sm)}pre{background:var(--surface-pale);border:1px solid var(--line-gray);border-radius:var(--radius-md);padding:var(--space-4) var(--space-5);overflow-x:auto;margin:1.4em 0;line-height:1.55}pre code{background:none;padding:0;font-size:.92em}ol,ul{padding-left:1.4em;margin:0 0 1.2em}li{margin:.3em 0;color:var(--ink-soft)}li::marker{color:var(--brand-green)}hr{border:none;border-top:1px solid var(--line-gray);margin:var(--space-9) 0}blockquote{margin:var(--space-6) 0;padding:.2em 0 .2em 1.2em;border-left:3px solid var(--brand-green);color:var(--ink-soft);font-style:normal}table{width:100%;border-collapse:collapse;margin:1.4em 0;font-size:.95em}td,th{border-bottom:1px solid var(--line-gray);padding:.6em .4em;text-align:left}th{color:var(--ink-black);font-weight:700;font-family:var(--font-en);font-size:var(--text-label);letter-spacing:.1em;text-transform:uppercase;border-bottom-color:var(--line-gray-strong)}td{color:var(--ink-soft)}.app-layout{display:grid;grid-template-columns:var(--sidebar-width) minmax(0,1fr);width:100%;max-width:var(--app-max-width);margin:0 auto;border-left:1px solid var(--line-gray);border-right:1px solid var(--line-gray);min-height:100vh}.app-main{padding:var(--main-pad-y) var(--main-pad-x);padding-bottom:calc(var(--tools-panel-h) + var(--space-4));background:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:var(--grid-size) var(--grid-size);background-position:-1px -1px}@media(max-width:1280px){.app-layout{grid-template-columns:var(--sidebar-width-md) minmax(0,1fr)}.app-main{padding:var(--space-7) var(--space-7);padding-bottom:calc(var(--tools-panel-h) + var(--space-4))}}@media(max-width:800px){.app-layout{grid-template-columns:minmax(0,1fr)}.app-main{padding:var(--space-6);padding-top:calc(58px + var(--space-5));padding-bottom:calc(var(--tools-panel-h) + var(--space-4))}}.section-heading{font-family:var(--font-en);font-size:var(--text-label);font-weight:700;text-transform:uppercase;letter-spacing:.15em;color:var(--ink-soft);margin:0 0 var(--space-4);padding:0;display:flex;align-items:center;gap:8px}.section-heading:after{content:"";flex-grow:1;height:1px;background:var(--line-gray)}.card{background:var(--bg-pure);border:1px solid var(--line-gray);padding:var(--space-5) var(--space-6);box-shadow:var(--shadow-card)}.tag{display:inline-flex;align-items:center;background:var(--ink-black);color:var(--bg-pure);font-family:var(--font-en);font-size:var(--text-micro);font-weight:700;letter-spacing:.1em;padding:4px 8px;text-transform:uppercase}.tag.tag-outline{background:transparent}.btn,.tag.tag-outline{color:var(--ink-black);border:1px solid var(--ink-black)}.btn{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-5);font-family:var(--font-jp);font-size:var(--text-body-sm);font-weight:700;text-decoration:none;background:var(--bg-pure);cursor:pointer;transition:background .15s,color .15s,transform .08s;box-shadow:var(--shadow-offset)}.btn:hover{background:var(--ticket-light)}.btn:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink-black)}.btn-primary{background:var(--brand-green);color:var(--bg-pure);border-color:var(--brand-green);box-shadow:2px 2px 0 var(--brand-green-dark)}.btn-primary:hover{background:var(--brand-green-dark);color:var(--bg-pure);border-color:var(--brand-green-dark)}.volume-control[data-v-1449035a]{position:fixed;top:14px;right:16px;z-index:200;display:flex;align-items:center;gap:10px;padding:7px 12px 7px 10px;background:var(--bg-pure);border:1px solid var(--ink-black);box-shadow:2px 2px 0 var(--ink-black);font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em}.vol-label[data-v-1449035a]{background:none;border:none;padding:0;cursor:pointer;font:inherit;font-weight:700;color:var(--ink-black);letter-spacing:.12em;text-transform:uppercase;line-height:1}.vol-label[data-v-1449035a]:hover{color:var(--brand-green)}.vol-label.muted[data-v-1449035a]{color:var(--ink-faint)}.vol-slider[data-v-1449035a]{-moz-appearance:none;appearance:none;-webkit-appearance:none;width:84px;height:4px;background:var(--line-gray);border-radius:2px;cursor:pointer;margin:0;padding:0}.vol-slider[data-v-1449035a]:focus{outline:none}.vol-slider[data-v-1449035a]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:14px;height:14px;background:var(--brand-green);border-radius:50%;border:2px solid var(--bg-pure);cursor:pointer;box-shadow:0 1px 2px #0003}.vol-slider[data-v-1449035a]::-moz-range-thumb{width:14px;height:14px;background:var(--brand-green);border-radius:50%;border:2px solid var(--bg-pure);cursor:pointer;box-shadow:0 1px 2px #0003}.vol-value[data-v-1449035a]{color:var(--ink-soft);font-weight:700;width:22px;text-align:right;font-variant-numeric:tabular-nums}@media(max-width:800px){.volume-control[data-v-1449035a]{display:none}}.keyboard[data-v-bde8d153]{--key-min-h:160px;--key-max-w:52px;--black-w-ratio:.6;--black-h-ratio:63%;--mark-size:18px;display:flex;width:calc(var(--key-max-w)*var(--white-count, 14));max-width:100%;height:var(--key-min-h);background:var(--ink-black);padding:4px;border-radius:var(--radius-md);box-shadow:var(--shadow-key);-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box}.keyboard.size-xs[data-v-bde8d153]{--key-min-h:70px;--key-max-w:30px;--mark-size:12px}.keyboard.size-sm[data-v-bde8d153]{--key-min-h:110px;--key-max-w:42px;--mark-size:15px}.keyboard.size-md[data-v-bde8d153]{--key-min-h:160px;--key-max-w:52px;--mark-size:18px}.keyboard.size-lg[data-v-bde8d153]{--key-min-h:200px;--key-max-w:68px;--mark-size:24px}.kb-row[data-v-bde8d153]{display:flex;flex:1 1 auto;position:relative;height:100%;width:100%}.key[data-v-bde8d153]{cursor:pointer;transition:transform .1s,background-color .2s;touch-action:none}.key.white[data-v-bde8d153]{flex:1 1 0;height:100%;background:var(--key-white);border:1px solid var(--key-white-edge);border-top:none;border-radius:0 0 3px 3px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:2%;z-index:1;position:relative;box-sizing:border-box;box-shadow:inset 0 -4px 4px #0000000d,0 2px 2px #0000001a}.key.white .label[data-v-bde8d153]{font-size:.6em}.key-char[data-v-bde8d153],.key.white .label[data-v-bde8d153]{color:var(--ink-faint);font-family:var(--font-mono);pointer-events:none;letter-spacing:.02em}.key-char[data-v-bde8d153]{position:absolute;top:6px;left:50%;transform:translate(-50%);font-size:.55em;font-weight:700;opacity:.55;text-transform:uppercase;line-height:1}.key.black .key-char[data-v-bde8d153]{color:#ffffffb3;opacity:.6;top:4px}.key.white[data-v-bde8d153]:hover{background:#f0f0f0}.key.white.highlighted[data-v-bde8d153]{background:var(--ticket-light)}.key.white.highlighted .label[data-v-bde8d153]{color:var(--brand-green-dark);font-weight:700}.key.white.active[data-v-bde8d153]{background:var(--brand-green);transform:translateY(2px);box-shadow:inset 0 -2px 2px #0000001a,0 0 0 transparent}.key.white.active .label[data-v-bde8d153]{color:var(--bg-pure);font-weight:700}.keyboard.size-sm .key.white .label[data-v-bde8d153],.keyboard.size-xs .key.white .label[data-v-bde8d153]{display:none}.key.black[data-v-bde8d153]{position:absolute;top:0;width:calc(100%/var(--white-count)*var(--black-w-ratio));height:var(--black-h-ratio);left:calc(100%/var(--white-count)*(var(--after-index, 0) + 1 - var(--black-w-ratio)/2));background:linear-gradient(180deg,#222 0,#000);z-index:2;border-radius:0 0 3px 3px;box-shadow:inset 0 -4px 4px #fff3,2px 2px 4px #00000080;display:flex;align-items:flex-end;justify-content:center;padding-bottom:4%;box-sizing:border-box}.key.black .label.black-label[data-v-bde8d153]{font-size:.55em;color:#fff9;font-family:var(--font-mono);pointer-events:none;letter-spacing:.02em;line-height:1}.keyboard.size-sm .key.black .label.black-label[data-v-bde8d153],.keyboard.size-xs .key.black .label.black-label[data-v-bde8d153]{display:none}.key.black[data-v-bde8d153]:hover{background:linear-gradient(180deg,#333 0,#111)}.key.black.highlighted[data-v-bde8d153]{background:linear-gradient(to bottom,var(--brand-green) 0,var(--brand-green-dark) 100%)}.key.black.active[data-v-bde8d153]{background:var(--brand-green);transform:translateY(2px);height:calc(var(--black-h-ratio) - 2%);box-shadow:inset 0 -2px 2px #ffffff1a,1px 1px 2px #00000080}.kb-overlay[data-v-bde8d153]{position:absolute;inset:0;pointer-events:none;z-index:3}.kb-mark[data-v-bde8d153]{position:absolute;transform:translate(-50%,-50%);min-width:var(--mark-size);height:var(--mark-size);padding:0 5px;background:var(--brand-green);color:var(--bg-pure);border-radius:calc(var(--mark-size)/2);display:flex;align-items:center;justify-content:center;font-size:calc(var(--mark-size)*.55);font-weight:700;line-height:1;border:1.5px solid hsla(0,0%,100%,.7);box-shadow:0 2px 4px #0003;font-family:var(--font-mono);white-space:nowrap}.kb-mark[data-v-bde8d153]:lang(ja),.kb-mark[data-lang=ja][data-v-bde8d153]{font-family:var(--font-jp);font-size:calc(var(--mark-size)*.5)}.pk-toggle[data-v-0b96e676]{position:fixed;right:20px;bottom:20px;width:52px;height:52px;border-radius:50%;border:2px solid var(--ink-black);background:var(--brand-green);color:var(--bg-pure);font-family:var(--font-en);font-size:1.4rem;font-weight:900;cursor:pointer;box-shadow:3px 3px 0 var(--ink-black);z-index:100;transition:transform .1s ease,box-shadow .1s ease}.pk-toggle[data-v-0b96e676]:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink-black)}.pk-toggle[data-v-0b96e676]:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink-black)}.tools-panel[data-v-0b96e676]{border-top:1px solid var(--line-gray);background:var(--bg-pure);position:fixed;bottom:0;left:0;right:0;flex-direction:row;z-index:100;box-shadow:var(--shadow-float)}.tools-header[data-v-0b96e676],.tools-panel[data-v-0b96e676]{display:flex;align-items:stretch}.tools-header[data-v-0b96e676]{padding:var(--space-4) var(--space-6);border-right:1px solid var(--line-gray);flex-direction:column;justify-content:center;gap:var(--space-3);flex-shrink:0;width:200px;position:relative}.tools-close[data-v-0b96e676]{position:absolute;top:6px;right:8px;background:none;border:none;font-size:.9rem;cursor:pointer;color:var(--ink-soft);padding:4px 6px;border-radius:2px;line-height:1}.tools-close[data-v-0b96e676]:hover{background:var(--ticket-light);color:var(--ink-black)}.control-group[data-v-0b96e676]{display:flex;flex-direction:column;gap:4px}.control-label[data-v-0b96e676]{font-family:var(--font-mono);font-size:var(--text-micro);letter-spacing:.14em;color:var(--ink-soft);text-transform:uppercase}.control-select[data-v-0b96e676]{font-family:var(--font-mono);font-size:.8rem;font-weight:700;color:var(--ink-black);background-color:var(--bg-pure);border:1px solid var(--line-gray);padding:7px 28px 7px 10px;border-radius:var(--radius-sm);cursor:pointer;-moz-appearance:none;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M0 0l5 6 5-6z' fill='%230F6A3D'/></svg>");background-repeat:no-repeat;background-position:right 10px center;width:100%;transition:border-color .15s,box-shadow .15s}.control-select[data-v-0b96e676]:hover:not(:disabled){border-color:var(--ticket-dark)}.control-select[data-v-0b96e676]:focus{outline:none;border-color:var(--brand-green);box-shadow:0 0 0 3px #0f6a3d26}.control-select[data-v-0b96e676]:disabled{opacity:.6;cursor:not-allowed}.piano-container[data-v-0b96e676]{padding:var(--space-4) var(--space-6);flex-grow:1;display:flex;flex-direction:row;align-items:center;gap:var(--space-7);background:var(--surface-pale);min-width:0;position:relative}.piano-readout[data-v-0b96e676]{position:absolute;top:8px;left:var(--space-6);z-index:5;display:inline-flex;align-items:baseline;gap:var(--space-2);padding:4px 10px;background:var(--bg-pure);border:1px solid var(--ink-black);box-shadow:2px 2px 0 var(--ink-black);pointer-events:none;font-family:var(--font-mono)}.readout-label[data-v-0b96e676]{font-size:var(--text-micro);font-weight:700;letter-spacing:.15em;color:var(--ink-faint);text-transform:uppercase}.readout-value[data-v-0b96e676]{font-family:var(--font-en);font-weight:900;font-size:1rem;color:var(--brand-green);letter-spacing:.02em}.piano-wrapper[data-v-0b96e676]{position:relative;flex:1 1 auto;min-width:0;overflow-x:auto}.piano-hud[data-v-0b96e676]{flex-shrink:0;padding:var(--space-4);border:1px dashed var(--line-gray-strong);background:var(--bg-pure);display:flex;flex-direction:column;gap:8px;align-self:center}.panel-label[data-v-0b96e676]{font-family:var(--font-mono);font-size:var(--text-micro);letter-spacing:.14em;color:var(--ink-soft);text-transform:uppercase}.chord-grid[data-v-0b96e676]{display:grid;grid-template-columns:repeat(7,52px);gap:6px}.chord-btn[data-v-0b96e676]{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:58px;padding:6px 4px;background:var(--bg-pure);border:1px solid var(--line-gray);border-radius:var(--radius-sm);cursor:pointer;font-family:inherit;transition:transform .08s,background .15s,border-color .15s}.chord-btn[data-v-0b96e676]:hover{background:var(--ticket-light);border-color:var(--ticket-dark)}.chord-btn.active[data-v-0b96e676]{transform:translateY(1px);background:var(--brand-green);border-color:var(--brand-green)}.chord-btn.active .chord-name[data-v-0b96e676],.chord-btn.active .chord-num[data-v-0b96e676]{color:var(--bg-pure)}.chord-num[data-v-0b96e676]{font-family:var(--font-en);font-weight:900;font-size:1.05rem;line-height:1;color:var(--ink-black);letter-spacing:-.02em}.chord-name[data-v-0b96e676]{font-family:var(--font-mono);font-size:.7rem;color:var(--ink-soft)}.chord-btn:hover .chord-name[data-v-0b96e676]{color:var(--ink-black)}@media(max-width:1500px){.tools-header[data-v-0b96e676]{display:none}.piano-container[data-v-0b96e676]{padding:var(--space-4);gap:var(--space-4)}}@media(max-width:1100px){.chord-grid[data-v-0b96e676]{grid-template-columns:repeat(7,44px);gap:4px}.chord-btn[data-v-0b96e676]{height:52px}}@media(max-width:900px){.chord-grid[data-v-0b96e676]{grid-template-columns:repeat(7,36px);gap:3px}.chord-btn[data-v-0b96e676]{height:48px}.chord-num[data-v-0b96e676]{font-size:.9rem}.chord-name[data-v-0b96e676]{font-size:.6rem}}@media(max-width:720px){.piano-hud[data-v-0b96e676]{display:none}}