#read-note{position:fixed;z-index:8;left:50%;bottom:calc(115px + env(safe-area-inset-bottom));transform:translateX(-50%);min-height:52px;padding:12px 24px;border:1px solid #e5e2d0;border-radius:12px;background:#f7f4e9;color:#172638;box-shadow:0 6px 25px #0005;font:600 15px system-ui;cursor:pointer;white-space:nowrap}
#note-overlay{position:fixed;inset:0;z-index:50;background:#06101bc9;display:grid;place-items:center;padding:max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));overflow:auto;cursor:auto;touch-action:pan-y;box-sizing:border-box}
#note-overlay.hidden,#read-note.hidden{display:none}
.note-reader{width:min(810px,100%);display:grid;grid-template-columns:minmax(0,1fr) 188px;gap:24px;align-items:start;max-height:100%;margin:auto}
.note-paper{background:#faf8ef;color:#18232d;padding:clamp(24px,4vw,48px);min-height:390px;box-sizing:border-box;box-shadow:0 14px 70px #0006;border-radius:3px 10px 4px 3px;overflow-wrap:anywhere}
#note-number{font:600 11px/1.5 system-ui;letter-spacing:.14em;color:#64717c}
#note-title{font:800 clamp(22px,2.7vw,34px)/1.22 system-ui;margin:36px 0 22px;letter-spacing:-.035em}
#note-copy{font:400 clamp(17px,1.8vw,22px)/1.6 system-ui;margin:0 0 36px;color:#3b4750}
#note-close{background:#163346;color:#f3f8fa;border:0;border-radius:9px;padding:14px 18px;min-height:48px;font:600 14px system-ui;cursor:pointer;margin-top:24px;max-width:100%}
#note-close:focus-visible{outline:3px solid #1198c1;outline-offset:5px}
.note-tracker{background:#0c2032ed;color:#e0edf4;border:1px solid #8aa3b633;border-radius:14px;padding:18px;box-sizing:border-box}
.note-tracker h3{font:600 14px/1.4 system-ui;margin:0 0 9px}.note-tracker strong{display:block;font:500 13px system-ui;color:#c9d5df;margin-bottom:17px}
#note-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
#note-grid span{display:grid;place-items:center;aspect-ratio:1;font:600 12px system-ui;border-radius:5px;border:1px solid;position:relative}
.note-found{color:#bcffe1;background:#165d45;border-color:#64d4a2!important}.note-found:after{content:'✓';font-size:9px;position:absolute;right:1px;top:-3px}
.note-missing{color:#f7bec7;background:#592d39;border-color:#aa6474!important}
.note-tracker p{font:400 11px/1.9 system-ui;color:#bdcbd7;margin:16px 0 0}.note-tracker i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px}.found-dot{background:#64d4a2}.missing-dot{background:#d97f8e}
body[data-phase=reading] header,body[data-phase=reading] footer,body[data-phase=reading] .mission,body[data-phase=reading] .inventory,body[data-phase=reading] .play-actions,body[data-phase=reading] #joystick,body[data-phase=reading] #repair-nearby,body[data-phase=reading] #reticle,body[data-phase=reading] #aim-hint,body[data-phase=reading] #celebration-caption{visibility:hidden!important}
body:not([data-phase=playing]) #read-note{display:none}
body[data-touch=true] #read-note{bottom:calc(190px + env(safe-area-inset-bottom))}
@media(max-height:550px){body[data-touch=true] #read-note{bottom:90px}}
@media(max-width:600px){#note-overlay{padding:12px}.note-reader{grid-template-columns:minmax(0,1fr) 104px;gap:10px}.note-paper{padding:22px 18px;min-height:350px}#note-title{font-size:22px;margin-top:28px}#note-copy{font-size:17px}#note-number{font-size:9px;letter-spacing:.07em}.note-tracker{padding:12px 8px;border-radius:10px}.note-tracker h3{font-size:12px}.note-tracker strong{font-size:11px}#note-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}#note-grid span{font-size:10px}.note-tracker p{font-size:9px}#note-close{padding:12px;font-size:12px}}
@media(max-height:480px){.note-reader{margin:0 auto}.note-paper{min-height:270px;padding-top:22px;padding-bottom:22px}#note-title{margin-top:20px}#note-grid{gap:4px}#note-close{margin-top:8px}.note-tracker{padding:12px}}
@media(max-height:480px) and (min-width:601px){#note-grid{grid-template-columns:repeat(6,minmax(0,1fr))}#note-grid span{font-size:10px}.note-tracker p{margin-top:12px}}