*{box-sizing:border-box}body{margin:0;background:#e8e5de;color:#26352e;font-family:Arial,sans-serif;overflow:hidden}#viewer{position:fixed;inset:0}canvas{display:block;touch-action:none}header{position:fixed;top:26px;left:30px;right:30px;display:flex;align-items:center;gap:24px;pointer-events:none}.mark{font-family:Georgia,serif;font-size:29px;letter-spacing:1px;border-right:1px solid #adb5aa;padding-right:24px}.mark span{display:block;font:9px Arial;letter-spacing:4px;text-align:center;margin-top:4px}.eyebrow{font-size:10px;letter-spacing:2px;color:#5e6d62}h1{font:28px Georgia,serif;margin:6px 0}button{font:12px Arial;cursor:pointer;border:1px solid #c4cabe;background:#fcfcf6dd;color:#2c3a31;min-height:42px;border-radius:7px;padding:0 17px;backdrop-filter:blur(12px)}button:hover{background:white}button:focus-visible{outline:3px solid #af8b43}#info{margin-left:auto;border-radius:50%;width:36px;min-height:36px;padding:0;pointer-events:auto;font-family:Georgia;font-size:20px}#details{position:fixed;right:30px;top:100px;width:320px;background:#fffff8ed;box-shadow:0 10px 50px #283b2320;padding:24px;border-radius:12px;z-index:3}h2{font:22px Georgia}p{font-size:13px;line-height:1.7}.muted{color:#788074;font-size:11px}.status{position:fixed;left:30px;bottom:145px;font-size:9px;letter-spacing:1.5px;pointer-events:none}.status>span{display:inline-block;background:#6f866c;width:6px;height:6px;border-radius:50%;margin-right:6px}.status small{display:block;font-size:11px;letter-spacing:0;color:#677263;margin-top:9px}nav{position:fixed;left:50%;transform:translateX(-50%);bottom:76px;display:flex;gap:4px;background:#f9faf2cc;padding:5px;border:1px solid #d0d5c8;border-radius:11px;white-space:nowrap;box-shadow:0 4px 30px #24372810}nav button{border:0;background:transparent}nav button.active{background:#314d3e;color:#fff}footer{position:fixed;bottom:18px;left:30px;right:30px;display:flex;align-items:center;justify-content:space-between}footer button{min-height:34px;font-size:11px;padding:0 12px}footer p{font-size:11px;color:#586351}footer b{padding:0 7px;color:#9b865b}footer p span{display:inline-block;border-left:1px solid #b8bfb0;margin-left:15px;padding-left:15px;color:#7a8374}#error{position:fixed;inset:35%;background:white;padding:30px;line-height:1.8;border-radius:12px}@media(max-width:600px){header{top:18px;left:18px;right:18px;gap:14px}.mark{font-size:22px;padding-right:14px}h1{font-size:23px}.eyebrow{font-size:8px}.status{left:18px;bottom:166px}.status small{font-size:10px}nav{bottom:103px;max-width:96vw}nav button{font-size:11px;padding:0 12px}footer{bottom:14px;left:18px;right:18px;align-items:flex-start;gap:5px;flex-direction:column}footer p{margin:6px 0 0;font-size:10px}#details{right:18px;top:90px;width:calc(100vw - 36px)}}

#references{border:0;border-radius:16px;max-width:1000px;width:94vw;max-height:90dvh;background:#f9f8f1;color:#26352e;padding:24px}#references::backdrop{background:#1d2923b8}#references img{display:block;width:100%;border-radius:8px;margin:15px 0}#closePhotos{float:right}footer>div{display:flex;gap:4px;flex-wrap:wrap}@media(max-width:600px){footer button{padding:0 8px;font-size:10px}nav button{padding:0 9px}.status{bottom:180px}}

@media(max-width:600px){nav{max-width:96vw;overflow-x:auto;justify-content:flex-start;width:max-content}nav button{font-size:10px;padding:0 7px}header{background:#faf9f0d9;padding:10px;border-radius:10px;top:10px}.status{background:#faf9f0dd;padding:8px;border-radius:7px}}
