:root{color-scheme:dark;font:16px/1.5 'Segoe UI',Arial,sans-serif;color:#f4f7f6;background:#bfd7e5;--panel:rgba(17,34,37,.94);--accent:#a5ebd3}*{box-sizing:border-box}body{margin:0;overflow:hidden}button{font:inherit;cursor:pointer;color:inherit;border:0}button:focus-visible{outline:3px solid #fff;outline-offset:4px}#viewer,canvas{display:block;width:100%;height:100dvh}canvas{touch-action:none}header{position:absolute;top:max(28px,env(safe-area-inset-top));left:32px;right:32px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.brand{display:flex;gap:14px;align-items:center;background:var(--panel);padding:13px 20px;border-radius:14px}.brand-symbol{border:1px solid var(--accent);color:var(--accent);border-radius:50%;width:44px;height:44px;display:grid;place-items:center;font-size:14px}.brand strong{display:block;letter-spacing:.17em;font-size:18px}.brand div>span{font-size:13px;color:#c2cfce}header button{pointer-events:auto;background:var(--panel);padding:14px 20px;border-radius:30px;font-size:14px}header button span{margin-left:14px;color:var(--accent)}nav{position:absolute;left:32px;top:50%;transform:translateY(-40%);width:268px;background:var(--panel);border:1px solid #ffffff12;border-radius:18px;padding:20px 12px;box-shadow:0 12px 40px #0002}.nav-heading{font-size:12px;letter-spacing:.08em;color:#b2c6c5;margin:0 10px 18px;display:flex;justify-content:space-between}.nav-heading span{font-size:12px;color:#799694}nav button{display:flex;gap:12px;align-items:center;width:100%;text-align:left;padding:17px 12px;background:transparent;border-radius:10px;margin-top:5px}nav button:hover{background:#ffffff0d}nav button[aria-current=true]{background:var(--accent);color:#15312d}.number{font-size:13px;align-self:flex-start;padding-top:3px;color:#92b3ad}nav button[aria-current=true] .number{color:#366a5c}nav button>span:nth-child(2){font-weight:600}nav small{display:block;font-size:12px;font-weight:400;opacity:.65;margin-top:4px}.camera-icon{margin-left:auto;color:#77a89a}nav p{font-size:13px;color:#a6bbba;margin:22px 12px 2px;line-height:1.7}footer{position:absolute;bottom:max(28px,env(safe-area-inset-bottom));left:32px;right:32px;display:flex;justify-content:space-between;align-items:end;pointer-events:none}.view-title{background:var(--panel);padding:12px 20px;border-radius:12px}.view-title span{display:block;font-size:12px;letter-spacing:.1em;color:#afc5c2}.view-title strong{display:block;font-size:20px;font-weight:500}#rotate{pointer-events:auto;background:var(--panel);border-radius:40px;padding:14px 20px;display:flex;gap:14px;align-items:center;font-size:14px}#rotate-icon{color:var(--accent);font-size:20px;line-height:1}.pin{position:absolute;transform:translate(-50%,-100%);background:#1c3838e8;border:1px solid #baf7df88;border-radius:30px;color:#e4fff5;padding:8px 13px;font-size:13px;box-shadow:0 3px 12px #0003}.pin::after{content:'';position:absolute;width:6px;height:6px;border-radius:50%;background:var(--accent);bottom:-12px;left:calc(50% - 3px)}#loading{position:absolute;inset:0;background:#162629;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;transition:opacity .4s}#loading.done{opacity:0;pointer-events:none}.loading-mark{font-size:34px;border:1px solid #a5ebd344;color:var(--accent);border-radius:50%;padding:22px;margin-bottom:15px}#loading strong{font-weight:500;font-size:22px}#progress{color:#b9ccca;font-size:14px}progress{width:200px;height:3px;accent-color:var(--accent)}#error{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--panel);padding:30px;border-radius:15px;width:min(90vw,450px)}#error button{background:var(--accent);color:#15312d;padding:10px 18px;border-radius:8px}@media(max-width:700px){header{left:14px;right:14px;top:max(14px,env(safe-area-inset-top))}.brand{padding:10px 12px;gap:10px}.brand-symbol{width:34px;height:34px;font-size:12px}.brand strong{font-size:15px}.brand div>span{font-size:12px}header button{font-size:13px;padding:12px}.brand-symbol,header button span{display:none}nav{top:auto;bottom:max(18px,env(safe-area-inset-bottom));left:12px;width:calc(100% - 24px);transform:none;display:flex;padding:6px;border-radius:15px;gap:3px}.nav-heading,nav p,nav small,nav .number,.camera-icon{display:none}nav button{margin:0;padding:14px 6px;justify-content:center;font-size:14px;min-height:48px}footer{bottom:calc(92px + env(safe-area-inset-bottom));left:14px;right:14px}.view-title{padding:8px 13px}.view-title strong{font-size:16px}.view-title span{font-size:12px}#rotate{padding:12px 14px;font-size:13px;gap:8px}.pin{font-size:12px;padding:7px 10px}}@media(max-height:520px) and (min-width:701px){nav{top:110px;transform:none;padding:8px}nav p,.nav-heading,nav small{display:none}nav button{padding:9px 12px}}