:root{--key-white-w: 52px;--key-white-h: 180px;--key-black-w: 32px;--key-black-h: 110px;--color-text-secondary: #6b7280;--piano-accent: #8b5cf6}.mc-page{font-family:Arial,sans-serif;max-width:1200px;margin:0 auto;padding:var(--spacing-lg);display:flex;flex-direction:column;gap:var(--panel-gap);min-height:100vh}.mc-header{padding:var(--spacing-md);flex:none}.demo-nav{margin-bottom:var(--spacing-md);padding-bottom:var(--spacing-sm);border-bottom:1px solid var(--color-border)}.nav-back-link{font-size:.85rem;color:var(--color-primary);text-decoration:none;font-weight:500;display:inline-flex;align-items:center;gap:4px;transition:opacity .2s}.nav-back-link:hover{opacity:.8;text-decoration:underline}.title-container{display:flex;align-items:center;gap:var(--spacing-sm)}.main-title-container{display:flex;align-items:center;gap:var(--spacing-sm);flex:1}.header-info{display:flex;flex-direction:column;gap:.5rem}.header-info--title{display:flex;flex-direction:row;gap:.85rem;align-items:center}.main-title{font-size:1.25rem;font-weight:600;margin:0;color:var(--color-primary)}.version-badge{background:var(--color-primary);color:var(--color-surface);padding:.2rem .5rem;border-radius:var(--border-radius);font-size:.8rem;font-weight:500}.copyright{font-size:.8rem;color:var(--color-text-secondary)}.mc-subtitle{margin-top:var(--spacing-md);padding-top:var(--spacing-md);border-top:1px solid var(--color-border)}.mc-subtitle .tagline{font-size:1.75rem;font-weight:700;font-style:normal;color:var(--piano-accent);letter-spacing:-.01em}.theme-toggle-container{display:flex;gap:5px;align-items:center}.theme-icon{display:grid;grid-template-columns:1fr;grid-template-rows:1fr;height:24px;width:24px}.theme-icon--moon,.theme-icon--sun{grid-row:1;grid-column:1;width:24px;height:24px;transition:opacity .3s}.theme-icon--moon{opacity:0}.theme-icon--sun{opacity:1}.theme-toggle{display:flex;align-items:center;margin-right:.5rem}.theme-switch{position:relative;display:inline-block;width:40px;height:20px}.theme-switch input{opacity:0;width:0;height:0}.theme-slider{position:absolute;cursor:pointer;top:0;right:0;bottom:0;left:0;background-color:#ccc;transition:.4s;border-radius:20px}.theme-slider:before{position:absolute;content:"";height:16px;width:16px;left:2px;bottom:2px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.theme-slider{background-color:#2196f3}input:checked+.theme-slider:before{transform:translate(20px)}.piano-loading{display:flex;align-items:center;justify-content:center;min-height:200px}.piano-loading-inner{display:flex;align-items:center;gap:12px;color:var(--color-text-secondary);font-size:.9rem}.spinner{display:inline-block;width:18px;height:18px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:spin .8s linear infinite;opacity:.6}@keyframes spin{to{transform:rotate(360deg)}}.piano-wrapper{display:flex;flex-direction:column;gap:var(--spacing-md);align-items:flex-start}.piano-controls-bar{display:flex;align-items:center;gap:20px;flex-wrap:wrap;width:100%}.sound-select-label{font-size:.8rem;font-weight:600;color:var(--color-text-secondary);margin-right:2px}.sound-select{padding:6px 28px 6px 10px;border:1.5px solid var(--color-border);border-radius:var(--border-radius);background:var(--color-surface);color:var(--color-text);font-size:.85rem;font-family:inherit;cursor:pointer;-moz-appearance:none;appearance:none;-webkit-appearance:none;background-repeat:no-repeat;background-position:right 8px center;transition:border-color .2s,box-shadow .2s}.sound-select:hover{border-color:var(--piano-accent)}.sound-select:focus-visible{outline:none;border-color:var(--piano-accent);box-shadow:0 0 0 2px #8b5cf640}.volume-slider-container{display:flex;align-items:center;gap:8px}.volume-slider-label{font-size:.75rem;font-weight:600;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.04em}.volume-slider-track{position:relative;width:120px;height:6px;background:var(--color-border);border-radius:3px;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;flex-shrink:0;overflow:visible}.volume-slider-track:hover{box-shadow:0 0 0 3px #8b5cf626}.volume-slider-track:active{cursor:grabbing}.volume-slider-fill{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--piano-accent);border-radius:3px;transition:width .05s linear}.volume-slider-thumb{position:absolute;top:50%;left:100%;width:14px;height:14px;background:var(--piano-accent);border:2px solid #fff;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;box-shadow:0 1px 4px #00000040;transition:left .05s linear}.volume-slider-value{font-size:.75rem;font-weight:600;color:var(--color-text);min-width:36px;text-align:center}body.dark-theme .volume-slider-track{background:#555}body.dark-theme .volume-slider-thumb{border-color:#2a2a2a}body.dark-theme .sound-select{background:#2a2a2a;color:#ddd;border-color:#555}.piano-hint{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 16px;font-size:.8rem;color:var(--color-text-secondary);padding:10px 0}.piano-hint-label{font-weight:600;white-space:nowrap}.piano-hint-keys{display:flex;flex-wrap:wrap;gap:6px 14px}.hint-row{display:flex;align-items:center;gap:6px;white-space:nowrap}.hint-chip{display:inline-block;padding:2px 6px;border-radius:4px;font-family:monospace;font-size:.75rem;font-weight:600;letter-spacing:.04em}.hint-chip.white-chip{background:#fff;color:#222;border:1px solid #bbb}.hint-chip.black-chip{background:#222;color:#fff}.piano-stage{position:relative;overflow:visible;padding-top:60px}.piano-keyboard{position:relative;display:inline-block;-webkit-user-select:none;user-select:none}.piano-white-keys{display:flex;flex-direction:row;gap:2px}.piano-key--white{position:relative;width:var(--key-white-w);height:var(--key-white-h);background:#fff;border:1.5px solid #bbb;border-radius:0 0 6px 6px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:8px;box-shadow:0 4px 6px #00000026,inset 0 -2px 4px #0000000d;transition:background .06s,box-shadow .06s,transform .06s;-webkit-tap-highlight-color:transparent}.piano-key--white:hover{background:#f0eaff}.piano-key--white.active{background:#d8c8ff;box-shadow:0 1px 3px #0003,inset 0 2px 4px #00000026;transform:translateY(2px)}.piano-key--white .key-shortcut{position:absolute;top:8px;font-size:.6rem;font-family:monospace;font-weight:700;color:#aaa;text-transform:uppercase;pointer-events:none}.piano-key--white .key-label{font-size:.65rem;font-weight:600;color:#555;pointer-events:none;line-height:1}.piano-key--white .key-label sub{font-size:.55rem;vertical-align:sub}.piano-black-keys{position:absolute;top:0;left:0;width:100%;pointer-events:none}.piano-key--black{position:absolute;top:0;width:var(--key-black-w);height:var(--key-black-h);left:calc(var(--black-offset) * (var(--key-white-w) + 2px) + (var(--key-white-w) - var(--key-black-w)) / 2);background:#1a1a1a;border:1px solid #000;border-radius:0 0 4px 4px;cursor:pointer;z-index:2;pointer-events:all;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:6px;box-shadow:2px 4px 6px #00000080,inset 0 -1px 3px #ffffff0d;transition:background .06s,box-shadow .06s,transform .06s;-webkit-tap-highlight-color:transparent}.piano-key--black:hover{background:#3a1a6a}.piano-key--black.active{background:#5b2db0;box-shadow:1px 2px 3px #00000080,inset 0 1px 3px #0006;transform:translateY(2px)}.piano-key--black .key-shortcut{position:absolute;top:5px;font-size:.5rem;font-family:monospace;font-weight:700;color:#888;text-transform:uppercase;pointer-events:none}.piano-key--black .key-label{font-size:.55rem;font-weight:600;color:#bbb;pointer-events:none;line-height:1}.note-anim{position:absolute;display:flex;flex-direction:column;align-items:center;gap:2px;pointer-events:none;transform:translate(-50%);z-index:10;color:var(--piano-accent);text-shadow:0 1px 4px rgba(139,92,246,.4)}.note-anim-icon{font-size:1.5rem;line-height:1}.note-anim-label{font-size:.65rem;font-weight:700;font-family:monospace;letter-spacing:.02em;background:var(--piano-accent);color:#fff;padding:1px 4px;border-radius:3px}body.dark-theme{--color-text-secondary: #b0b0b0}body.dark-theme .theme-icon--moon{opacity:1;stroke:#ffb74d}body.dark-theme .theme-icon--sun{opacity:0}body.dark-theme .hint-chip.white-chip{background:#2a2a2a;color:#ddd;border-color:#555}body.dark-theme .piano-key--white{background:#e8e8e8;border-color:#888}body.dark-theme .piano-key--white:hover{background:#d8c8ff}body.dark-theme .piano-key--white.active{background:#b89fee}.piano-page-content{display:flex;gap:32px;align-items:flex-start}.piano-page-content #pianoContainer{flex:1}.piano-info{display:flex;flex-direction:column;padding:20px 24px;font-size:.85rem;line-height:1.6;color:var(--color-text)}.piano-info h3{margin:0 0 12px;font-size:1rem;font-weight:700;color:var(--piano-accent)}.piano-info p{margin:0 0 14px}.piano-info p:last-of-type{margin-bottom:0}.info-code-block{margin:16px 0 0;padding:14px 16px;background:#1e1e2e;border-radius:8px;overflow-x:auto;font-size:.78rem;line-height:1.55}.info-code-block pre{margin:0;padding:0;background:transparent}.info-code-block code{font-family:SF Mono,Fira Code,Cascadia Code,Consolas,monospace;color:#cdd6f4}body.dark-theme .info-code-block{background:#11111b}@media (max-width: 900px){:root{--key-white-w: 38px;--key-white-h: 140px;--key-black-w: 24px;--key-black-h: 86px}.piano-key--white .key-shortcut,.piano-key--black .key-shortcut{display:none}.piano-page-content{flex-direction:column;gap:24px}}@media (max-width: 600px){.mc-page{padding:var(--spacing-sm)}:root{--key-white-w: 28px;--key-white-h: 110px;--key-black-w: 18px;--key-black-h: 68px}.piano-key--white .key-label,.piano-key--black .key-label{display:none}.piano-hint-keys{gap:4px 10px}.piano-info{padding:14px 16px;font-size:.8rem}}