.sight-room{--sight-ink:#263d49;--sight-green:#116d59;box-sizing:border-box;max-width:1100px;min-width:0;margin:0 auto;padding:28px;color:var(--sight-ink);background:#f7f5ed;border:1px solid #e4e6dc;border-radius:18px;font-family:inherit}.sight-room *{box-sizing:border-box}.sight-heading{max-width:760px;margin:15px 0 28px}.sight-eyebrow{color:#67796d;font-size:10px;letter-spacing:2px;font-weight:700}.sight-heading h2{font-family:Georgia,serif;font-size:clamp(27px,4vw,40px);font-weight:400;line-height:1.2;letter-spacing:-.5px;margin:10px 0 12px;color:var(--sight-ink)}.sight-heading p,.sight-result p{font-size:14px;line-height:1.7;color:#51646a;margin:7px 0}.sight-link{padding:0;border:0;background:none;color:var(--sight-green);font:inherit;font-size:12px;cursor:pointer}.sight-stages{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.sight-stage{display:flex;align-items:flex-start;gap:14px;text-align:left;padding:20px;min-width:0;background:#fffdf7;border:1px solid #dce2d6;border-radius:12px;color:var(--sight-ink);font:inherit;cursor:pointer}.sight-stage:hover{border-color:#699987;box-shadow:0 5px 18px #2854480a}.sight-step{font-family:Georgia,serif;font-size:22px;color:#91a49a;line-height:1.1}.sight-stage>span:nth-child(2){flex:1;min-width:0}.sight-stage strong{display:block;font-family:Georgia,serif;font-size:19px;font-weight:400;margin-bottom:8px}.sight-stage span span{display:block;font-size:12px;line-height:1.6;color:#62716e}.sight-stage small{display:block;font-size:10px;color:var(--sight-green);margin-top:12px}.sight-small{font-size:12px!important;line-height:1.65;color:#63746e;margin:16px 0}.sight-mode{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}.sight-mode button{border:1px solid #d7dfd2;border-radius:8px;padding:10px 15px;background:#fffdf7;color:#536960;font:inherit;font-size:12px;cursor:pointer}.sight-mode button.selected{background:#e1eee4;border-color:#8cac96;color:#164d3c}.sight-exercise{min-width:0;padding:20px;background:#fffdf7;border:1px solid #dce2d6;border-radius:13px}.sight-staff-scroll{overflow-x:auto;max-width:100%;min-width:0;border:1px solid #e2e7da;border-radius:8px;background:#fffdf7;scrollbar-color:#9caf9f #f1f4ed}.sight-staff-scroll svg{display:block;max-width:none}.sight-status{min-height:26px;margin-top:20px;font-size:14px;color:#285b49}.sight-controls{display:flex;gap:20px;flex-wrap:wrap;margin:20px 0}.sight-controls label{display:flex;align-items:center;gap:9px;font-size:12px;color:#50655c}.sight-controls input{width:76px;padding:9px 8px;border:1px solid #c8d6c9;background:white;border-radius:6px;color:#234d3c;font:inherit}.sight-controls label span{font-size:11px;color:#718077}.sight-actions{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0 6px}.sight-primary,.sight-secondary{border:1px solid var(--sight-green);border-radius:8px;padding:12px 17px;font:inherit;font-size:12px;font-weight:600;cursor:pointer}.sight-primary{background:var(--sight-green);color:white}.sight-secondary{background:transparent;color:var(--sight-green);border-color:#b4c8b8}.sight-primary:disabled{opacity:.45;cursor:not-allowed}.sight-room button:focus-visible,.sight-room input:focus-visible,.sight-staff-scroll:focus-visible{outline:3px solid #5eab89;outline-offset:3px}.sight-keyboard{margin-top:26px;padding-top:10px;border-top:1px solid #e2e8dc}.sight-keyboard .keyboard{margin-left:auto;margin-right:auto}.sight-result{display:flex;gap:25px;align-items:center;margin:28px 0}.sight-score{font-family:Georgia,serif;font-size:68px;color:var(--sight-green);line-height:1;white-space:nowrap}.sight-score span{font-size:25px}.sight-result h3{font-family:Georgia,serif;font-weight:400;font-size:24px;margin:0;color:var(--sight-ink)}.sight-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:16px}.sight-metrics>div{padding:17px;background:#fffdf7;border:1px solid #dae2d5;border-radius:9px}.sight-metrics strong{display:block;color:var(--sight-green);font-size:23px;font-weight:500}.sight-metrics span{display:block;color:#677b6f;font-size:11px;margin-top:5px}@media(max-width:700px){.sight-room{padding:18px 14px;border-radius:13px}.sight-stages{grid-template-columns:1fr}.sight-stage{padding:16px}.sight-exercise{padding:12px}.sight-heading{margin-bottom:20px}.sight-result{align-items:flex-start;gap:16px}.sight-score{font-size:48px}.sight-result h3{font-size:22px}.sight-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.sight-actions button{flex:1 1 auto}.sight-controls{gap:12px}.sight-mode button{flex:1}}@media(max-height:500px) and (orientation:landscape){.sight-room{padding:14px}.sight-heading{margin:10px 0 15px}.sight-heading h2{font-size:27px}.sight-heading p{font-size:12px}.sight-exercise{padding:10px}.sight-keyboard{margin-top:15px}.sight-staff-scroll svg{height:150px}}

.sight-keyboard{overflow-x:auto;padding-bottom:4px}
@media(orientation:landscape) and (max-height:600px){
 .phone-practice .sight-new-phrase{display:none}.phone-practice.practice-options-open .sight-new-phrase{display:inline-flex}
 .phone-practice .reading-path-shortcut{display:none}.phone-practice .sight-room{padding:6px 8px;border-radius:8px}.phone-practice .sight-heading{display:none}.phone-practice .sight-room>.sight-link{font-size:11px;min-height:24px}.phone-practice .sight-exercise{padding:6px 8px}.phone-practice .sight-staff-scroll svg{height:100px;width:auto}.phone-practice .sight-status{font-size:12px;min-height:24px;margin-top:5px}.phone-practice .sight-keyboard{margin-top:4px;padding-top:4px}.phone-practice .sight-keyboard .keyboard{height:110px}.phone-practice .sight-keyboard .piano-key.white{height:110px}.phone-practice .sight-keyboard .piano-key.black{height:70px}.phone-practice .sight-actions{margin:6px 0;gap:8px}.phone-practice .sight-actions button{padding:9px 13px;min-height:40px}.phone-practice .sight-mode,.phone-practice .sight-controls,.phone-practice .sight-exercise>.sight-small,.phone-practice .sight-keyboard>.sight-small,.phone-practice .sight-room:not(.sight-timed) .sight-actions{display:none}.phone-practice.practice-options-open .sight-mode,.phone-practice.practice-options-open .sight-controls,.phone-practice.practice-options-open .sight-room:not(.sight-timed) .sight-actions{display:flex}.phone-practice.practice-options-open .sight-exercise>.sight-small{display:block}.phone-practice.practice-options-open .sight-controls{margin:8px 0}.phone-practice.practice-options-open .sight-mode{margin:6px 0}
}