:root{font-family:Arial,sans-serif;color:#111827}html,body{width:100vw;height:100vh}*{box-sizing:border-box}body{margin:0;background:#f1f5f9}.keyboard-react{padding:6px}.keyboard-shell{border:2px solid #171717;background:#e6e7e8;max-width:1000px;margin:0 auto;display:flex;flex-direction:column;align-items:center;height:100vh}.rotate-blocker{display:none}.keys-viewport{width:100%;display:flex;justify-content:center;overflow:visible;padding:0 10px 10px;flex:1}.keys{position:relative;display:flex;gap:0;align-items:flex-start;padding:0 8px 8px 2px;border-bottom:2px solid #171717;background:#f2f2f2;overflow-x:visible;touch-action:none}.piano-key{position:relative;display:flex;flex-direction:column;justify-content:space-between;align-items:center;border:2px solid #171717;border-radius:0 0 9px 9px;border-top:0;width:58px;height:272px;padding-top:14px;margin:0;background:#f6f6f6;font-size:22px;line-height:1;color:#111;z-index:1;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;touch-action:none}.piano-key--black{width:40px;height:176px;margin-left:-20px;margin-right:-20px;padding-top:8px;border:2px solid #0f172a;border-top:0;border-radius:0 0 8px 8px;background:#0f1115;color:#fff;z-index:4}.piano-key .qwerty{font-size:18px;font-weight:400;margin-bottom:0}.piano-key .displayName{font-size:18px;white-space:pre-line;text-align:center;user-select:none;-webkit-user-select:none}.piano-key--black .qwerty{font-size:16px;margin-bottom:0}.piano-key--black .displayName{font-size:18px;line-height:1.25;margin-bottom:10px}.hide-note-labels .displayName,.hide-qwerty-labels .qwerty{visibility:hidden}.piano-key[data-status=playing]{box-shadow:inset 0 0 0 4px #2b6c8d}.piano-key[data-marked=true]{box-shadow:inset 0 0 0 4px #e59e0c}.controls{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:center;gap:10px;padding:6px 12px;font-size:16px;width:100%;justify-content:center}.controls-row{width:100%;display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:nowrap;padding:0}.controls-row-1{margin-bottom:2px;align-items:flex-end}.controls-row-2{margin-top:2px}.control-group{display:flex;gap:10px;align-items:center}.control-option{display:inline-flex;align-items:center;gap:5px;line-height:1;white-space:nowrap}.control-option input{width:19px;height:19px}.octave-pill{position:relative;display:inline-flex;align-items:center}.octave-pill:after{content:"";position:absolute;right:16px;top:50%;transform:translateY(-50%);width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:8px solid #334155;pointer-events:none}.octave-pill select{height:44px;min-width:190px;border:2px solid #cbd5e1;border-radius:999px;background:#eef2f7;padding:0 44px 0 18px;font-size:16px;font-weight:600;color:#0f172a;box-shadow:none;outline:none;appearance:none;-webkit-appearance:none;-moz-appearance:none}.mark-play-block{display:inline-flex;align-items:center;gap:9px;white-space:nowrap}.mark-play-block button{line-height:1}.mark-play-block button{height:45px;min-width:78px;border:2px solid #808080;border-radius:10px;background:#e4e4e4;font-size:16px}.mark-play-block button:disabled{opacity:.5}.marked-count{font-size:16px}.help-reset{margin-left:auto;gap:14px;width:auto;justify-content:flex-end}.icon-button{border:0;background:transparent;display:flex;flex-direction:column;align-items:center;line-height:1;color:#111827;cursor:pointer}.icon-button span{width:48px;height:48px;border:2px solid #cbd5e1;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;font-size:16px;background:#eef2f7}.icon-button svg{display:block}.icon-button small{margin-top:4px;font-size:16px}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(15,23,42,.28);z-index:2000;display:flex;align-items:center;justify-content:center;padding:18px}.modal-card{width:100%;max-width:820px;max-height:80vh;overflow:auto;background:#f3f6f9;border:2px solid #cbd5e1;border-radius:18px;box-shadow:0 12px 40px #0f172a2e;padding:14px 14px 18px}.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;padding:2px 4px}.modal-title{font-size:22px;font-weight:700;color:#0f172a}.modal-close{border:2px solid #cbd5e1;background:#ffffff;border-radius:14px;height:40px;width:40px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.modal-body{padding:0 6px}.help-list{margin:0;padding-left:20px;font-size:16px;line-height:1.35;color:#0f172a}.help-list li{margin-bottom:10px}.reset-text{padding:0 8px}.reset-text p{margin:0 0 10px;font-size:16px;line-height:1.35;color:#0f172a}.reset-actions{display:flex;justify-content:flex-end;gap:12px;padding:10px 8px 0}.reset-btn{height:44px;min-width:110px;border-radius:12px;border:2px solid #cbd5e1;background:#ffffff;font-size:16px;font-weight:600;cursor:pointer}.reset-btn--primary{border-color:#2f7cf6;background:#2f7cf6;color:#fff}.reset-btn--secondary{background:#eef2f7;color:#0f172a}.toggle-row{display:flex;align-items:center;gap:10px;justify-content:center}.toggle-label{min-width:76px;text-align:center}.segmented-group{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:190px}.segmented-inline{display:flex;flex-direction:column;align-items:center;gap:6px}.segmented-title{font-size:16px;font-weight:600}.segmented-control{width:190px;background:#eef2f7;border:2px solid #cbd5e1;border-radius:999px;padding:4px;display:flex;gap:6px}.segmented-option{flex:1;border:0;background:transparent;border-radius:999px;padding:8px 10px;font-size:16px;cursor:pointer;color:#111827;font-weight:600}.segmented-option--active{background:#2f7cf6;color:#fff}@media (max-width: 900px) and (orientation: portrait){.rotate-blocker{display:flex;width:100%;height:100%;align-items:center;justify-content:center;padding:20px}.rotate-blocker__card{max-width:360px;width:100%;background:#eef2f7;border:2px solid #cbd5e1;border-radius:16px;padding:18px;text-align:center}.rotate-blocker__card h2{margin:0 0 8px;font-size:20px}.rotate-blocker__card p{margin:0;font-size:16px}.controls,.keys-viewport,.qwerty{display:none}.piano-key{justify-content:flex-end}}@media (max-width: 900px) and (orientation: landscape){.keyboard-react{padding:2px}.keyboard-shell{height:100vh}.controls{gap:6px;padding:4px 8px;font-size:14px}.controls-row{gap:8px}.segmented-group{min-width:auto}.segmented-group--type .segmented-title{display:none}.segmented-group--type .segmented-control{width:150px}.segmented-group--keys .segmented-inline{flex-direction:row;gap:6px;align-items:center}.segmented-title--keys{margin-right:2px;min-width:34px}.segmented-group--keys .segmented-control{width:130px}.segmented-option{padding:5px 8px;font-size:14px}.octave-pill select{min-width:132px;height:34px;font-size:14px;padding:0 32px 0 12px}.octave-pill:after{right:12px;border-left-width:5px;border-right-width:5px;border-top-width:6px}.control-option{font-size:14px;gap:4px}.control-option input{width:16px;height:16px}.mark-play-block{gap:6px}.mark-play-block button{height:32px;min-width:60px;font-size:14px}.marked-count{font-size:14px}.help-reset{gap:8px}.icon-button span{width:36px;height:36px}.icon-button svg{width:20px;height:20px}.icon-button small{font-size:13px}.keys-viewport{padding:0 4px 4px}.piano-key{width:46px;height:calc(100vh - 188px);min-height:138px;max-height:210px;padding-top:8px;justify-content:flex-end}.piano-key--black{width:30px;margin-left:-15px;margin-right:-15px;height:calc((100vh - 188px)*.66);min-height:92px;max-height:138px;padding-top:5px}.piano-key .qwerty,.piano-key .displayName{font-size:14px}.qwerty{display:none}.piano-key--black .qwerty{font-size:12px}.piano-key--black .displayName{font-size:13px;margin-bottom:6px}}.switch{position:relative;width:64px;height:28px;display:inline-block}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#cbd5e1;transition:.2s;border-radius:999px;border:2px solid #64748b}.slider:before{position:absolute;content:"";height:22px;width:22px;left:3px;top:2px;background-color:#fff;transition:.2s;border-radius:50%;border:2px solid #64748b}.switch input:checked+.slider{background-color:#93c5fd;border-color:#2563eb}.switch input:checked+.slider:before{transform:translate(36px)}