body{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,#1f130c,#2c1a10);color:#fef3c7;font-family:Inter,sans-serif,system-ui;margin:0;padding:12px;box-sizing:border-box;overflow-x:hidden}.app-scene{display:flex;align-items:center;justify-content:center;width:min(100%,1200px);gap:clamp(14px,2vw,34px);padding:8px 0}.sprite-side{flex:0 0 auto;display:flex;align-items:center;justify-content:center;min-width:150px}.sprite-side img{width:clamp(128px,12vw,220px);height:auto;display:block;image-rendering:pixelated;filter:drop-shadow(0 10px 16px rgba(0,0,0,.28))}.piano-app-wrapper{display:flex;flex-direction:column;align-items:center;width:100%;max-width:650px;box-sizing:border-box;gap:10px}#portraitHint{display:none;font-size:1rem;letter-spacing:.08em;color:#fbbf24;text-align:center;opacity:.3}#display-board{padding:14px 18px;background:linear-gradient(135deg,#27160d,#381d0f);border:2px solid;border-image:linear-gradient(to right,#f59e0b,#ea580c) 1;border-radius:12px;text-align:center;width:100%;box-sizing:border-box;box-shadow:0 10px 25px #0006}.song-title-main{font-size:1rem;font-weight:600;color:#fed7aa;margin-bottom:2px;opacity:.85}.song-title-sub{font-size:.85rem;color:#d1d5db;margin-bottom:10px;opacity:.7;letter-spacing:.5px}#controls{margin-bottom:12px;display:flex;gap:8px;align-items:center;justify-content:center;width:100%}#songSelect{flex:1 1 auto;width:auto}#keySelect{flex:0 0 120px;width:120px}button{padding:10px 14px;background:linear-gradient(to right,#ea580c,#d97706);color:#fff;border:1px solid #f97316;border-radius:8px;cursor:pointer;font-size:1rem;font-weight:600;box-shadow:0 4px 6px #ea580c33;transition:all .2s ease;touch-action:manipulation}select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-color:#27160d;background-image:url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23ea580c%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E);background-repeat:no-repeat;background-position:right 14px center;background-size:10px;padding:10px 36px 10px 14px;border:1px solid #ea580c;border-radius:8px;color:#fef3c7;min-width:0;font-size:.9rem;font-family:inherit;cursor:pointer;box-shadow:0 4px 6px #ea580c26;transition:all .2s ease}select:hover{border-color:#f59e0b;box-shadow:0 6px 10px #ea580c40}select:focus{outline:none;border-color:#f59e0b;box-shadow:0 0 0 2px #f59e0b4d}select option{background-color:#27160d;color:#fef3c7;padding:12px 10px;font-size:.95rem}select option:hover,select option:focus,select option:checked{background-color:#381d0f;color:#fed7aa}#playPauseBtn,#instrumentToggleBtn,#muteToggleBtn{min-width:44px;text-align:center;padding:10px 12px}button:hover:not(:disabled),select:hover{opacity:.95;transform:translateY(-1px);box-shadow:0 6px 10px #ea580c4d}button:disabled{background:#451a03;border-color:#78350f;color:#78350f;cursor:not-allowed;box-shadow:none}.toggle-btn{background:#27160d;border:1px solid #ea580c;color:#fed7aa}.toggle-btn.active{background:linear-gradient(to right,#16a34a,#15803d);border-color:#22c55e;color:#fff;box-shadow:0 4px 6px #22c55e4d}.full-sheet-container{background:#fbf8f1;color:#291810;border:1px solid #d9a066;border-radius:8px;padding:12px;box-shadow:inset 0 2px 4px #0000000f,0 2px 6px #0003;height:160px;overflow-y:auto;text-align:left;display:flex;flex-direction:column;gap:10px;box-sizing:border-box}.full-sheet-line{padding:8px 12px;border-radius:6px;transition:background .2s,transform .1s;cursor:pointer}.full-sheet-line:hover{background:#fef08a}.full-sheet-line.highlight{background:#fde68a;border-left:4px solid #ea580c}.full-lyrics{font-size:.95rem;font-weight:700;color:#9a3412;margin-bottom:2px}.full-notes{font-family:monospace;font-size:1.05rem;letter-spacing:1.5px;color:#291810;font-weight:700}.piano-container{width:100%;overflow-x:auto;overflow-y:visible;box-sizing:border-box;border-radius:12px;display:flex;justify-content:center;padding-top:0;margin-top:0;-webkit-overflow-scrolling:touch}.piano{display:flex;position:relative;background:#27160d;padding:14px;border-radius:12px;border:2px solid #ea580c;width:max-content;max-width:none;box-sizing:border-box;box-shadow:0 12px 30px #0009}.key{position:relative;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:0 0 6px 6px;touch-action:manipulation}.white{width:40px;height:150px;background:linear-gradient(to bottom,#fffbeb,#fef3c7);border:1px solid #d97706;z-index:1;box-sizing:border-box;transition:background .1s}.white:active,.white.active{background:linear-gradient(to bottom,#fde68a,#fcd34d)}.black{width:28px;height:90px;background:linear-gradient(to bottom,#451a03,#1f130c);position:absolute;z-index:2;border-radius:0 0 4px 4px;transition:background .1s;border:1px solid #78350f}.black:active,.black.active{background:linear-gradient(to bottom,#78350f,#451a03)}.note-popup{position:absolute;bottom:12px;left:50%;transform:translate(-50%) translateY(4px);background:#000000a6;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);color:#fef3c7;padding:2px 5px;border-radius:4px;font-size:.65rem;font-weight:700;opacity:0;transition:opacity .15s ease,transform .15s ease;pointer-events:none;white-space:nowrap;z-index:10;box-shadow:0 2px 4px #0000004d}.key.active .note-popup{opacity:1;transform:translate(-50%) translateY(0)}@media screen and (max-width:1024px)and (orientation:portrait),(hover:none)and (pointer:coarse)and (orientation:portrait){body{padding:8px}.app-scene{flex-direction:column;gap:10px}.sprite-side{min-width:auto}.sprite-side img{width:140px}.piano-app-wrapper{width:100%}#portraitHint{display:block}.piano-container{overflow-x:auto;justify-content:center;padding-top:0;margin-top:0}.piano{transform:none;margin-bottom:0;margin-top:0}}@media screen and (orientation:landscape)and (max-width:900px){body{padding:6px}.app-scene{gap:10px}.sprite-side img{width:110px}.piano-app-wrapper{max-width:100%;gap:6px}#display-board{padding:10px 12px}#controls{margin-bottom:8px;gap:6px}.full-sheet-container{height:92px;padding:8px 10px}.piano-container{width:100%;max-height:140px}.piano{width:max-content;max-width:none;padding:8px 10px}.white{width:40px;height:120px}.black{width:28px;height:72px}}