*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{font-family:Inter,Arial,sans-serif;color:#26372f;background:#eeefeb}button{font:inherit}#viewer{position:relative;width:100%;height:100%;height:100dvh;isolation:isolate}canvas{display:block;width:100%;height:100%;touch-action:none;outline:none}canvas:focus-visible{outline:2px solid #547966;outline-offset:-4px}.heading{position:absolute;z-index:1;top:max(30px,env(safe-area-inset-top));left:max(34px,env(safe-area-inset-left));pointer-events:none}.eyebrow{font-size:9px;letter-spacing:.22em;font-weight:600;color:#6d7971}h1{font-size:19px;font-weight:500;letter-spacing:-.035em;margin:8px 0}.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#648770;margin:0 0 3px 10px}.toolbar{position:absolute;z-index:2;top:max(32px,env(safe-area-inset-top));right:max(34px,env(safe-area-inset-right));display:flex;gap:6px;padding:5px;background:#ffffffd9;border:1px solid #ffffff;border-radius:12px;box-shadow:0 3px 16px #26372f08;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:38px;padding:8px 12px;border:0;border-radius:7px;color:#36483e;background:transparent;font-size:12px;cursor:pointer;transition:background .15s}button:hover{background:#e9eee8}button:focus-visible{outline:2px solid #4e7860;outline-offset:2px}button:disabled{opacity:.4;cursor:default}button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.instructions{position:absolute;z-index:1;bottom:max(22px,env(safe-area-inset-bottom));left:50%;transform:translate(-50%);margin:0;font-size:11px;color:#67736b;white-space:nowrap;padding:10px 15px;border-radius:30px;background:#f7f8f3cf;pointer-events:none}.touch{display:none}.loading{position:absolute;inset:0;z-index:5;background:#eeefeb;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:24px}.loading[hidden],[hidden]{display:none!important}.loading-mark{font-size:48px;color:#668674;margin-bottom:20px}h2{font-size:19px;font-weight:500;letter-spacing:-.025em;margin:0 0 10px}.loading p{font-size:12px;color:#727b74;max-width:400px;line-height:1.6}progress{width:180px;height:3px;border:0;accent-color:#678974;margin-top:18px}progress::-webkit-progress-bar{background:#dce2da}progress::-webkit-progress-value{background:#678974}#retry{margin-top:15px;background:#fff}@media(pointer:coarse){.desktop{display:none}.touch{display:block}button{min-height:44px}}@media(max-width:600px){.heading{top:23px;left:20px}h1{font-size:17px}.toolbar{top:auto;right:auto;left:50%;transform:translate(-50%);bottom:calc(65px + env(safe-area-inset-bottom));white-space:nowrap}.instructions{bottom:calc(18px + env(safe-area-inset-bottom));font-size:9px;padding:9px 11px}}@media(prefers-reduced-motion:reduce){button{transition:none}}.heading{padding:15px 18px;background:#171b1bd9;border:1px solid #ffffff20;border-radius:12px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#f5f5ef}.eyebrow{color:#b6c4bd}h1{letter-spacing:.08em;font-weight:600}.dot{background:#9eb49b}.heading{background:#ffffffd9;border-color:#fff;color:#26372f}.eyebrow{color:#6d7971}body,.loading{background:#000;color:#f3f4f0}.heading,.toolbar{background:#161918e8;border-color:#ffffff20;color:#f3f4f0}.eyebrow{color:#aeb8b1}.toolbar button{color:#f3f4f0}.toolbar button:hover{background:#ffffff18}.instructions{background:#161918e8;color:#bac3bd}.loading p{color:#bac3bd}#retry{background:#26372f;color:#fff}