:root{font-family:system-ui,-apple-system,"Segoe UI","Microsoft YaHei",sans-serif;color:#172944;background:#edf1f6;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px solid #4288ff;outline-offset:3px}button:disabled{opacity:.35;cursor:default}[hidden]{display:none!important}#viewer{position:relative;width:100%;height:100svh;min-height:460px;overflow:hidden;background:radial-gradient(ellipse at 48% 36%,#fff,#e9eef5 80%)}#canvas-host{position:absolute;inset:0}canvas{display:block;width:100%;height:100%;touch-action:none}header{position:absolute;top:max(24px,env(safe-area-inset-top));left:30px;right:30px;display:flex;align-items:center;gap:13px;pointer-events:none}.brand-mark{width:44px;height:48px;border:1px solid #ccd5e1;border-radius:12px;display:grid;place-items:center;font-size:32px;background:#ffffffa6}.eyebrow{font-size:12px;letter-spacing:1.4px;margin:0 0 4px;color:#5b6c82}.eyebrow span{letter-spacing:.4px;margin-left:7px;color:#6c7d92}h1{font-size:22px;margin:0;font-weight:650;letter-spacing:1px}.circle{pointer-events:auto;margin-left:auto;border:1px solid #d7dfe9;background:#ffffffd9;border-radius:50%;height:42px;width:42px;font-size:19px}.view-switch{position:absolute;right:30px;top:94px;display:flex;padding:4px;border:1px solid #dce3eb;border-radius:11px;background:#ffffffc9;backdrop-filter:blur(12px)}.view-switch button{border:0;background:none;border-radius:7px;padding:9px 13px;font-size:14px}.view-switch button[aria-pressed=true]{background:#e5edf8;color:#235fbc;font-weight:650}.bottom{position:absolute;left:16px;right:16px;bottom:max(16px,env(safe-area-inset-bottom));display:flex;align-items:center;flex-direction:column;pointer-events:none}.hint{font-size:14px;color:#596b82;padding:7px 12px;margin-bottom:12px;border-radius:8px;background:#f8faffbd;backdrop-filter:blur(6px);text-align:center;line-height:1.5}.toolbar{display:flex;align-items:center;gap:8px;padding:8px;background:#ffffffed;border:1px solid #fff;border-radius:21px;box-shadow:0 10px 40px #233d6320;pointer-events:auto}.toolbar button{display:flex;align-items:center;gap:10px;height:56px;min-width:125px;padding:0 20px;border:0;border-radius:14px;background:transparent;font-size:16px;font-weight:600}.toolbar button.active{background:#19365e;color:white;box-shadow:0 4px 10px #19365e24}.toolbar button#measure.active{background:#c55820}.toolbar svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}.divider{height:25px;width:1px;background:#d9e1ec}.footnote{font-size:12px;color:#78879a;margin-top:12px;letter-spacing:.5px}.footnote span{margin:0 7px}.selection,.measure-panel{position:absolute;top:160px;left:30px;max-width:calc(100% - 60px);background:#fffffff2;border:1px solid white;box-shadow:0 8px 30px #27426612;border-radius:15px;padding:16px 18px;backdrop-filter:blur(12px)}.selection{min-width:250px}.selection>span{font-size:16px;font-weight:650}.selection button{float:right;background:none;border:0;font-size:22px;margin:-6px -6px 0 16px;min-width:36px;min-height:36px}.selection p{font-size:14px;margin:8px 0 0;line-height:1.65;color:#607089}.measure-panel{width:300px}.step{display:flex;align-items:center;gap:10px;font-size:15px}.step>span{display:grid;place-items:center;background:#fff0e7;color:#ac4815;border-radius:50%;width:28px;height:28px;flex:none}#measure-result{margin-top:15px}#measure-result>span{font-size:13px;color:#718098}#measure-result p{margin:4px 0 12px}#distance{font-size:36px;letter-spacing:-1px;font-variant-numeric:tabular-nums}#measure-result p>span{margin-left:8px;font-size:14px}.measure-actions{display:flex;gap:8px;margin-top:14px}.measure-actions button{border:1px solid #dce2e9;background:#f7f9fc;border-radius:8px;min-height:38px;padding:7px 12px;font-size:14px}.measure-actions button:last-child{background:#fff4eb;border-color:#f3d6c5;color:#a54416}#labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}.dimension-label{position:absolute;transform:translate(-50%,-50%);background:#a64116;color:#fff;padding:7px 11px;border:2px solid #fff;border-radius:8px;font-weight:650;font-size:15px;white-space:nowrap;box-shadow:0 3px 12px #69280020}.point-label{position:absolute;transform:translate(-50%,-140%);color:#a64116;font-size:13px;font-weight:750;background:#fff;border-radius:5px;padding:2px 5px}.toast{position:absolute;left:50%;bottom:190px;transform:translateX(-50%);padding:10px 16px;background:#19365eea;color:white;border-radius:10px;font-size:14px;white-space:nowrap}.loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;background:#edf2f9f2;z-index:5}.loading>span{font-size:14px;color:#61738e;max-width:85%;text-align:center}.spinner{height:32px;width:32px;border:3px solid #cedbec;border-top-color:#255b9c;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}dialog{width:min(440px,calc(100% - 32px));border:1px solid #d6dfe9;border-radius:22px;padding:24px;color:#172944;box-shadow:0 20px 80px #1a2c4a33}dialog::backdrop{background:#17294445;backdrop-filter:blur(4px)}.dialog-title{display:flex;align-items:center;justify-content:space-between}.dialog-title h2{font-size:22px;margin:0}.dialog-title button{background:none;border:0;width:36px;height:36px;font-size:27px}dialog ol{padding-left:23px;margin:24px 0}dialog li{margin-bottom:22px;padding-left:5px}dialog li::marker{color:#366dac;font-weight:600}dialog strong{font-size:16px}dialog p{font-size:15px;color:#61728a;line-height:1.7;margin:5px 0 0}.note{background:#f1f5fa;padding:13px;border-radius:10px;font-size:14px!important}.primary{margin-top:20px;background:#19365e;color:white;border:0;border-radius:11px;width:100%;height:48px;font-weight:600}
@media(max-width:600px){header{top:max(18px,env(safe-area-inset-top));left:18px;right:18px;gap:10px}h1{font-size:19px}.brand-mark{height:40px;width:38px;font-size:28px}.eyebrow{font-size:12px;letter-spacing:.8px}.view-switch{right:18px;top:82px}.view-switch button{padding:8px 12px}.toolbar{width:min(100%,370px);gap:3px;padding:6px;border-radius:18px}.toolbar button{padding:0 11px;min-width:0;flex:1;justify-content:center;height:54px;gap:7px;font-size:16px}.toolbar svg{width:22px;height:22px}.bottom{bottom:max(12px,env(safe-area-inset-bottom))}.hint{font-size:13px;margin-bottom:10px}.footnote{margin-top:9px}.selection,.measure-panel{top:130px;left:18px;max-width:calc(100% - 36px);padding:12px 15px;width:auto;min-width:0}.measure-panel{width:275px}.step{font-size:14px}.step>span{width:24px;height:24px}#distance{font-size:30px}#measure-result{margin-top:8px}.measure-actions{margin-top:8px}.selection p{font-size:13px}.dimension-label{font-size:14px}.toast{bottom:172px;font-size:13px}}
@media(max-height:560px){header{top:12px}.view-switch{top:76px}.bottom{bottom:8px}.hint,.footnote{display:none}.measure-panel,.selection{top:100px}.measure-panel{padding:10px 14px}#distance{font-size:26px}.toolbar button{height:46px}}
.measure-panel.complete .step{display:none}.measure-panel.complete #measure-result{margin-top:0}

.selection{border:2px solid #277deb;border-left-width:5px}.selection>span{color:#0864d9}
.developer-credit{font-size:11px;color:#53677e;margin-top:5px;text-align:center;letter-spacing:.2px}
.snap-options{display:flex;gap:6px;margin-top:10px}.snap-options button{border:1px solid #d6e0ee;background:#f5f8fc;border-radius:7px;padding:7px 10px;font-size:13px;min-height:34px}.snap-options button[aria-pressed=true]{background:#e9f2ff;border-color:#4087df;color:#095ebf;font-weight:650}
.measure-panel.complete .snap-options{display:none}
#snap-preview{position:absolute;width:26px;height:26px;border:3px solid #066be9;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 3px white;pointer-events:none}#snap-preview span{position:absolute;left:50%;bottom:32px;transform:translateX(-50%);background:#075fcf;color:white;padding:4px 7px;border-radius:5px;white-space:nowrap;font-size:12px}
.point-label{border:2px solid #e46a22;padding:3px 7px}.toast{bottom:205px}
@media(max-width:600px){.measure-panel{padding:10px 13px}.measure-actions button{min-height:34px;padding:5px 10px}.snap-options{margin-top:8px}.developer-credit{font-size:11px}.toast{bottom:190px}}
@media(max-height:560px){.developer-credit{font-size:10px;margin-top:4px}}

.developer-credit a{color:#346487;text-decoration:none}h1{max-width:65vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.brand-mark{width:48px;height:48px;overflow:hidden;flex:none}.brand-mark img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(2.1);transform-origin:50% 36%}
.developer-credit{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 10px;line-height:1.6}.developer-credit a{pointer-events:auto;display:inline-block;padding:4px 0}.contact-phones{white-space:nowrap}
@media(max-width:600px){.brand-mark{width:42px;height:42px}.developer-credit>span:first-child{flex-basis:100%}.developer-credit{font-size:10px;margin-top:3px;gap:0 8px}.footnote{margin-top:6px}.bottom{bottom:max(7px,env(safe-area-inset-bottom))}.hint{margin-bottom:6px}}