html{min-height:100%}body{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;min-height:100dvh;background-color:#080d24;background-image:linear-gradient(#0508186b,#080c2294),url(/backgrounds/pixel-night-sky.png);background-position:center;background-size:cover;background-attachment:fixed;color:#fef3c7;font-family:Inter,sans-serif,system-ui;margin:0;padding:12px;box-sizing:border-box;overflow-x:hidden}body[data-background-theme=dawn]{background-color:#6e2b18;background-image:linear-gradient(#2f100c47,#42181170),url(/backgrounds/pixel-dawn-sky-sunrise-clouds.png)}body:before{content:"";display:none}.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;cursor:pointer;outline:none}.sprite-side:focus-visible img{outline:3px solid #fef3c7;outline-offset:5px}.sprite-side:hover img,.sprite-side:active img{transform:translateY(-2px) scale(1.03)}.sprite-side img{width:clamp(128px,12vw,220px);height:auto;display:block;image-rendering:pixelated;transition:transform .18s ease;filter:drop-shadow(0 10px 16px rgba(0,0,0,.28))}.credits{margin-top:6px;color:#fef3c780;font-size:.78rem;letter-spacing:.04em;text-shadow:0 2px 5px rgba(0,0,0,.45)}.piano-app-wrapper{display:flex;flex-direction:column;align-items:center;width:100%;max-width:650px;box-sizing:border-box;gap:10px}#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}.title-controls-row{display:flex;align-items:center;justify-content:center;gap:10px;max-width:100%}.song-picker-title,.key-picker-title,.empty-song-picker{position:relative;display:inline-flex;align-items:center;justify-content:center;max-width:100%;padding:2px 24px 2px 8px;border-radius:6px;cursor:pointer}.song-picker-title:after,.key-picker-title:after,.empty-song-picker:after{content:"▾";position:absolute;right:6px;top:50%;transform:translateY(-50%);color:#fb923c;font-size:.9rem;pointer-events:none}.song-picker-title:hover,.key-picker-title:hover,.empty-song-picker:hover{background:#fb923c1f}.song-title-main,.key-title-text{font-size:1rem;font-weight:600;color:#fed7aa;opacity:.85;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.key-picker-title{flex:0 0 auto}.key-title-text{font-size:.9rem}.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%}.song-picker-title #songSelect,.key-picker-title #keySelect,.empty-song-picker #emptySongSelect{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer}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,#practiceBtn,#instrumentToggleBtn,#muteToggleBtn{min-width:44px;text-align:center;padding:10px 12px}.inline-triangle-toggle{min-width:auto;padding:2px 5px;border:0;background:transparent;color:#fb923c;box-shadow:none;font-size:.9rem;line-height:1}.inline-triangle-toggle:hover:not(:disabled){background:#fb923c1f;box-shadow:none}#display-board.controls-hidden #controls{margin-bottom:0}#display-board.controls-hidden #playPauseBtn,#display-board.controls-hidden #practiceBtn,#display-board.controls-hidden #muteToggleBtn,#display-board.controls-hidden #instrumentToggleBtn{display:none}.empty-song-picker #emptySongSelect{font-size:16px}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:#dd7007;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}#display-board.controls-hidden .full-sheet-container{height:216px}.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}.sheet-note{display:inline-block;min-width:2.4em;margin:1px 2px 1px 0;padding:2px 4px;border-radius:5px;text-align:center}.sheet-note.current{background:#fb923c;color:#fff7ed;box-shadow:0 0 0 2px #ea580c40}.sheet-note.pause.current{background:#fde68a;color:#9a3412}.practice-complete-message{margin-top:10px;padding:8px 12px;border-radius:8px;background:linear-gradient(to right,#16a34a,#15803d);color:#fff;font-size:.95rem;font-weight:700;box-shadow:0 5px 12px #16a34a40}.practice-complete-message[hidden]{display:none}.piano-container{width:100%;overflow:hidden;overflow-y:visible;box-sizing:border-box;border-radius:12px;display:flex;justify-content:center;padding:8px 12px 12px;margin-top:0;-webkit-overflow-scrolling:touch}.piano{--white-key-width: 40px;--black-key-width: 28px;--white-key-height: 150px;--black-key-height: 90px;display:flex;position:relative;background:#27160d;padding:14px;border-radius:12px;border:2px solid #ea580c;width:max-content;flex:0 0 auto;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:var(--white-key-width);height:var(--white-key-height);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:var(--black-key-width);height:var(--black-key-height);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)}.white.practice-target{background:linear-gradient(to bottom,#bbf7d0,#86efac);box-shadow:inset 0 0 0 3px #16a34a73}.black.practice-target{background:linear-gradient(to bottom,#16a34a,#14532d);box-shadow:inset 0 0 0 2px #bbf7d0b3}.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}body[data-background-theme=night]:before{display:block;position:fixed;top:calc(14px + env(safe-area-inset-top));right:calc(18px + env(safe-area-inset-right));width:clamp(38px,12vw,58px);aspect-ratio:1;border-radius:50%;background:#f7e397;box-shadow:-6px 0 #fef3c7 inset,0 0 0 2px #fef3c72e,0 0 18px #fde68a59;image-rendering:pixelated;pointer-events:none;z-index:0}body[data-background-theme=dawn]:before{display:block;position:fixed;left:calc(28px + env(safe-area-inset-left));bottom:calc(28px + env(safe-area-inset-bottom));width:clamp(34px,10vw,48px);aspect-ratio:1;border-radius:50%;background:#fde047b8;box-shadow:0 0 0 5px #fb923c3d,0 0 14px #fde04747,0 0 28px #fb923c29;opacity:.72;image-rendering:pixelated;pointer-events:none;z-index:0}body[data-background-theme=night]:after{content:"";position:fixed;top:calc(10px + env(safe-area-inset-top));right:calc(8px + env(safe-area-inset-right));width:clamp(34px,11vw,52px);aspect-ratio:1;border-radius:50%;background:#080d24;box-shadow:-3px 2px #080d2473;pointer-events:none;z-index:0}.app-scene,.credits{position:relative;z-index:1}.app-scene{flex-direction:column;gap:10px;width:100%}.sprite-side{min-width:auto}.sprite-side img{width:clamp(72px,25vw,140px)}.piano-app-wrapper{width:100%;max-width:650px}#controls{flex-wrap:wrap}.full-notes{letter-spacing:.5px}.sheet-note{min-width:1.95em;margin-right:1px;padding:2px}#portraitHint{display:block}.piano-container{overflow:hidden;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;width:100%}.sprite-side{flex:0 1 96px;min-width:0}.sprite-side img{width:110px}.piano-app-wrapper{flex:1 1 0;min-width:0;max-width:100%;gap:6px}.credits{margin-top:2px;font-size:.68rem;opacity:.5}#display-board{padding:7px 10px}.song-title-main{font-size:.9rem}.song-title-sub{font-size:.75rem;margin-bottom:6px}#controls{margin-bottom:8px;gap:6px}.full-notes{font-size:.95rem;letter-spacing:.3px}.sheet-note{min-width:1.85em;margin-right:1px;padding:1px 2px}.full-sheet-container{height:76px;padding:6px 8px}#display-board.controls-hidden .full-sheet-container{height:118px}.practice-complete-message{margin-top:6px;padding:5px 10px;font-size:.82rem}.piano-container{width:100%;max-height:none}.piano{width:max-content;max-width:none;padding:8px 10px}}