:root{font-family:Arial,"Microsoft YaHei",sans-serif;color:#192935;background:#f6f8fa;font-synthesis:none;--blue:#1677ff;--ink:#192935;--muted:#536777;--line:#d9e2e8;--radius:12px}*{box-sizing:border-box}body{margin:0}button,select{font:inherit;color:inherit}button{cursor:pointer;touch-action:manipulation}button:focus-visible,select:focus-visible,canvas:focus-visible{outline:3px solid #1677ff;outline-offset:3px}button:disabled{opacity:.4;cursor:default}::selection{background:#bbd9ff;color:#142d49}button,select{border:1px solid var(--line);background:#fff;border-radius:var(--radius)}button:hover{background:#edf5ff}button:active{background:#dcecff}button svg{width:20px;height:20px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}[hidden]{display:none!important}#app{height:100svh;min-height:580px;display:grid;grid-template-rows:auto auto minmax(220px,1fr) auto;overflow:hidden}.topbar{display:flex;align-items:center;gap:24px;min-height:76px;padding:16px 32px;background:white;border-bottom:1px solid var(--line)}#brand{width:210px;height:auto;max-height:35px;object-fit:contain}h1{font-size:22px;line-height:1.2;letter-spacing:-.02em;margin:0;font-weight:700}.language{margin-left:auto;flex-shrink:0}select{padding:10px 28px 10px 12px;min-height:44px;font-size:14px}.instruction{display:flex;gap:16px;align-items:center;min-height:116px;padding:20px 32px 16px;background:white}.instruction h2{font-size:25px;line-height:1.25;margin:0 0 5px;font-weight:700;letter-spacing:-.02em}.instruction p{margin:0;color:var(--muted);line-height:1.45;font-size:14px}#step-detail{margin-top:5px;font-size:14px}.instruction-number{background:var(--blue);color:#fff;display:grid;place-items:center;width:44px;height:44px;font-size:22px;border-radius:50%;flex-shrink:0}#viewport{position:relative;overflow:hidden;background:#f1f5f7;min-height:0}#canvas{width:100%;height:100%;display:block;touch-action:none}#leaders,#labels{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}#labels{overflow:hidden}.label3d{position:absolute;left:0;top:0;max-width:190px;background:rgba(255,255,255,.96);border:1px solid #d6e0e7;border-radius:10px;padding:6px 10px;line-height:1.15;color:#203547;will-change:transform;pointer-events:none;white-space:nowrap;transition:opacity .15s}.label3d strong{display:block;font-size:14px}.label3d[data-key="screen"] strong{font-size:22px}.label3d[data-key="smallHole"],.label3d[data-key="baseDot"]{border-color:#ff6a00}.label3d[data-key="tee"]{border-color:#1677ff}.viewer-tools{position:absolute;right:24px;top:18px;display:flex;gap:8px}.tool{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 14px;font-size:14px;font-weight:700}#gesture-hint{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:12px;margin:0;padding:7px 12px;background:rgba(255,255,255,.92);border-radius:8px;color:#466070;pointer-events:none}#steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:18px 32px 22px;border-top:1px solid var(--line);background:white}.step-card{display:grid;grid-template-columns:1fr auto;align-items:stretch;border:1px solid var(--line);border-radius:12px;overflow:hidden;min-height:104px}.step-card.active{border:2px solid var(--blue)}.step-open{border:0;border-radius:0;background:transparent;display:flex;align-items:center;gap:12px;text-align:left;padding:16px;min-width:0}.step-card.active .step-open{background:#edf5ff}.step-num{display:grid;place-items:center;flex-shrink:0;width:34px;height:34px;border-radius:50%;background:var(--blue);color:white;font-size:17px;font-weight:700}.step-copy{display:flex;flex-direction:column;gap:5px}.step-copy strong{font-size:15px;line-height:1.4}.photo-open{border:0;border-radius:0;border-left:1px solid var(--line);background:#f8fafc;padding:12px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px;min-width:62px;font-size:12px;white-space:nowrap}#loader,#error{position:absolute;inset:0;background:#f6f8fa;display:grid;place-items:center;z-index:10}.loading-content{display:grid;gap:16px;text-align:center;min-width:240px}.loading-content strong{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}progress{appearance:none;width:100%;height:5px;border:0;border-radius:3px;overflow:hidden}progress::-webkit-progress-bar{background:#dce6ec}progress::-webkit-progress-value{background:var(--blue)}#error{display:flex;flex-direction:column;text-align:center;padding:24px}#retry{min-height:44px;padding:10px 24px}dialog{margin:0;width:100vw;max-width:none;height:100svh;max-height:none;border:0;padding:0;background:#f4f7f9;color:var(--ink)}dialog::backdrop{background:#192935}.media-shell{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;padding:0 28px}.media-header{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;border-bottom:1px solid var(--line)}.media-header h2{font-size:22px;line-height:1.4;margin:0}.icon-button{min-width:48px;min-height:48px;display:grid;place-items:center}.icon-button svg{width:24px;height:24px}#media-stage{position:relative;display:flex;justify-content:center;align-items:center;min-height:0;overflow:hidden;padding:16px 0}#photo-wrap{position:relative;max-width:100%;max-height:100%;line-height:0}#media-image{width:100%;height:100%;object-fit:contain;display:block}#photo-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}#media-video{max-width:100%;max-height:100%;display:block;object-fit:contain;background:#10181f}.media-footer{display:flex;align-items:center;justify-content:center;gap:22px;padding:12px 0 4px}.media-footer>div{min-width:240px;text-align:center}.media-footer p{font-size:14px;margin:4px 0;color:var(--muted)}#media-counter{font-size:14px;font-variant-numeric:tabular-nums}#media-dots{display:flex;justify-content:center;gap:8px;padding:10px 0 18px}#media-dots button{width:36px;height:8px;border:0;border-radius:4px;background:#cbd7e0;padding:0;min-height:12px}#media-dots button.active{background:var(--blue)}#media-error{padding:20px;text-align:center}
@media(max-width:1100px){.topbar{padding:12px 20px;gap:18px}#brand{width:170px}h1{font-size:20px}.instruction{padding:16px 20px;min-height:116px}#steps{padding:12px 20px 16px;gap:8px}.step-card{grid-template-columns:1fr}.step-open{padding:10px;gap:8px}.photo-open{border-left:0;border-top:1px solid var(--line);min-height:36px;padding:6px;flex-direction:row}.step-copy strong{font-size:14px}.step-num{width:28px;height:28px;font-size:15px}}
@media(max-width:600px){#app{min-height:640px;grid-template-rows:auto auto minmax(210px,1fr) auto}.topbar{display:grid;grid-template-columns:1fr auto;padding:10px 14px;gap:6px 12px;min-height:72px}#brand{width:142px;max-height:25px}h1{grid-column:1;grid-row:2;font-size:17px;line-height:1.3}.language{grid-column:2;grid-row:1/3}select{font-size:12px;padding:8px 19px 8px 7px;max-width:103px;min-height:40px}.instruction{padding:11px 14px;gap:10px;min-height:109px;align-items:flex-start}.instruction h2{font-size:18px;line-height:1.35;margin-bottom:4px}.instruction p{font-size:11px;line-height:1.35}#step-detail{font-size:12px;margin-top:5px}.instruction-number{width:30px;height:30px;font-size:17px;margin-top:1px}.viewer-tools{top:10px;right:12px;gap:6px}.tool{min-height:40px;padding:8px 10px;font-size:12px;gap:5px}.tool svg{width:17px;height:17px}.label3d{max-width:156px;padding:5px 7px;border-radius:8px}.label3d strong{font-size:12px}.label3d[data-key="screen"] strong{font-size:18px}#gesture-hint{font-size:10px;bottom:7px;padding:5px 7px}#steps{gap:6px;padding:10px 9px max(12px,env(safe-area-inset-bottom));align-items:stretch}.step-card{min-height:125px;grid-template-rows:1fr auto}.step-open{padding:9px 6px 7px;display:block;text-align:left}.step-num{width:24px;height:24px;font-size:13px;margin-bottom:7px}.step-copy strong{font-size:11px;line-height:1.35}.photo-open{font-size:11px;min-height:35px;gap:4px;padding:5px 2px}.photo-open svg{width:15px;height:15px}.media-shell{padding:0 12px}.media-header{padding:14px 0}.media-header h2{font-size:17px}.icon-button{min-width:44px;min-height:44px}#media-stage{padding:10px 0}.media-footer{gap:12px}.media-footer>div{min-width:0;flex:1}.media-footer p{font-size:12px}.media-footer span{font-size:12px}#media-dots{padding-bottom:16px}}
@media(max-height:520px) and (orientation:landscape){#app{min-height:0;grid-template-rows:44px 66px minmax(100px,1fr) 88px}.topbar{display:flex;padding:5px 14px;min-height:0}#brand{width:140px;max-height:24px}h1{font-size:16px}select{min-height:32px;padding:5px 20px 5px 8px}.instruction{padding:7px 14px;min-height:0;gap:10px}.instruction h2{font-size:16px}.instruction p{font-size:10px}#step-detail{display:none}.instruction-number{width:28px;height:28px;font-size:16px}#steps{padding:6px 12px;gap:6px}.step-card{min-height:0;grid-template-columns:1fr 42px;grid-template-rows:1fr}.step-open{display:flex;padding:6px;gap:7px}.step-copy strong{font-size:10px}.step-num{width:22px;height:22px;font-size:12px;margin:0}.photo-open{border-top:0;border-left:1px solid var(--line);flex-direction:column;padding:4px;font-size:9px;min-width:0;gap:4px}.photo-open svg{width:16px;height:16px}.viewer-tools{top:7px;right:10px}.tool{min-height:32px;font-size:10px;padding:6px 8px}.label3d strong{font-size:11px}#gesture-hint{font-size:9px;padding:3px 5px;bottom:4px}.media-header{padding:8px 0}.media-header h2{font-size:16px}.media-footer{padding:4px 0}.media-footer p{margin:2px}#media-dots{padding:4px 0 8px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
#screen-direction{position:absolute;top:18px;left:24px;display:flex;align-items:center;gap:7px;background:#fff;border:1px solid #d9e2e8;border-radius:10px;padding:6px 9px;color:#1677ff;pointer-events:none}#screen-direction svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}#screen-direction strong{display:block;font-size:13px}@media(max-width:600px){#screen-direction{left:12px;top:10px;padding:5px 7px;gap:5px}#screen-direction strong{font-size:12px}#screen-direction svg{width:22px;height:22px}}@media(max-height:520px) and (orientation:landscape){#screen-direction{top:7px;left:10px;padding:3px 6px}#screen-direction svg{width:20px;height:20px}}
@media(min-width:900px) and (min-height:521px){.label3d{max-width:247px;padding:8px 13px;border-radius:13px}.label3d strong{font-size:18.2px}.label3d[data-key="screen"] strong{font-size:28.6px}}
/* Label opacity is animated by the visibility manager so fading cards reserve
   their screen space and cannot exceed the visible-card limit. */
.label3d{transition:none;will-change:transform,opacity}
.label3d strong,.label3d[data-key="screen"] strong{font-size:var(--label-size,15px)}
.label3d[data-level="large"]{padding:5px 8px;border-color:#e0e6eb;background:rgba(255,255,255,.88)}
/* One selected language throughout; native language names only in the menu. */
.topbar{position:relative;z-index:20}.language{position:relative}#language-toggle{display:flex;align-items:center;justify-content:center;gap:7px;min-width:64px;min-height:44px;padding:9px 12px;font-size:14px;font-weight:700}#language-toggle svg{width:20px;height:20px}#language-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:152px;max-width:min(260px,calc(100vw - 28px));max-height:55svh;overflow:auto;padding:5px;border:1px solid var(--line);border-radius:12px;background:#fff;z-index:30}#language-menu button{display:block;width:100%;min-height:44px;padding:9px 12px;text-align:left;border:0;border-radius:8px;font-size:15px;white-space:nowrap}#language-menu button[aria-checked="true"]{background:#edf5ff;color:#075bcc;font-weight:700}.instruction{min-height:90px}.instruction>div:last-child{min-width:0}.step-copy{min-width:0}.step-copy strong{overflow-wrap:break-word}#screen-direction{min-height:38px}.label3d strong{white-space:normal;overflow-wrap:anywhere}.media-header h2{min-width:0}.media-header .icon-button{flex-shrink:0}.media-footer>div{max-width:65ch}#media-caption{line-height:1.4}
@media(max-width:600px){#language-toggle{min-height:40px;min-width:60px;padding:8px;font-size:12px}.instruction{min-height:88px}.media-header h2{font-size:17px}.step-card{min-height:125px}.topbar h1{overflow-wrap:break-word}}
@media(max-height:520px) and (orientation:landscape){.instruction{min-height:0}#language-toggle{min-height:40px;padding:6px 8px;font-size:12px}#language-menu{top:100%}}
/* First-person controls occupy only the lower corners of the 3D viewport. */
#help{min-width:42px;font-size:18px;padding:8px 12px}#touch-controls{display:none;position:absolute;inset:0;pointer-events:none}#joystick{position:absolute;bottom:22px;left:18px;width:110px;height:110px;border:1px solid #a8bbc9;border-radius:50%;background:rgba(255,255,255,.40);pointer-events:auto;touch-action:none;user-select:none}#joystick-stick{position:absolute;left:50%;top:50%;width:42px;height:42px;transform:translate(-50%,-50%);border-radius:50%;border:1px solid #7e9ab1;background:rgba(22,119,255,.40);pointer-events:none}#vertical-controls{position:absolute;right:16px;bottom:22px;display:grid;gap:10px;pointer-events:auto}#vertical-controls button{min-width:48px;min-height:44px;background:rgba(255,255,255,.72);touch-action:none;user-select:none}#gesture-hint{transition:opacity .35s;max-width:calc(100% - 20px);white-space:normal;text-align:center}#gesture-hint.hint-hidden{opacity:0}
@media(pointer:coarse),(max-width:760px){#touch-controls{display:block}#overview span{display:none}#overview{min-width:40px}#gesture-hint{bottom:3px;max-width:calc(100% - 20px);font-size:10px}#joystick{bottom:32px}#vertical-controls{bottom:32px}}
@media(max-height:520px) and (orientation:landscape){#joystick{width:90px;height:90px;bottom:14px}#joystick-stick{width:36px;height:36px}#vertical-controls{bottom:14px;gap:4px}#vertical-controls button{min-height:36px}}

/* One site: choose the real mat, then keep the choice within reach. */
.topbar{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:18px}.topbar .language{margin-left:0}#mode-switch{display:flex;align-items:stretch;gap:3px;padding:3px;background:#edf2f6;border:1px solid var(--line);border-radius:12px}#mode-switch button{min-height:40px;padding:8px 14px;border:1px solid transparent;border-radius:8px;background:transparent;font-size:14px;line-height:1.2;font-weight:700;white-space:nowrap}#mode-switch button:hover{background:#e1ecf7}#mode-switch button[aria-pressed="true"]{color:#075bcc;background:#fff;border-color:#bdcfe1}#mode-switch button:focus-visible{outline-offset:1px}
#mode-chooser{position:fixed;inset:0;z-index:80;overflow:auto;overscroll-behavior:contain;background:#f6f8fa;padding:24px 40px 32px;opacity:1;transition:opacity .3s ease-out}#mode-chooser.is-closing{opacity:0;pointer-events:none}.choosing-mode{overflow:hidden}.chooser-header{display:flex;align-items:center;justify-content:space-between;max-width:1280px;margin:0 auto;min-height:44px;gap:20px}#choice-brand{display:block;width:210px;max-width:58%;max-height:35px;object-fit:contain}.choice-language{position:relative;flex-shrink:0}#choice-language-toggle{display:flex;align-items:center;justify-content:center;gap:7px;min-width:64px;min-height:44px;padding:9px 12px;font-size:14px;font-weight:700}#choice-language-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:152px;max-width:calc(100vw - 32px);max-height:55svh;overflow:auto;padding:5px;border:1px solid var(--line);border-radius:12px;background:#fff;z-index:90}#choice-language-menu button{display:block;width:100%;min-height:44px;padding:9px 12px;text-align:left;border:0;border-radius:8px;font-size:15px;white-space:nowrap}#choice-language-menu button[aria-checked="true"]{background:#edf5ff;color:#075bcc;font-weight:700}.chooser-content{width:100%;max-width:1160px;margin:38px auto 0}#chooser-question{font-size:clamp(28px,3vw,40px);line-height:1.2;letter-spacing:-.02em;text-align:center;text-wrap:balance;margin:0 0 28px}.choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.choice-card{display:flex;flex-direction:column;min-width:0;overflow:hidden;padding:0;border:1px solid #c5d2dd;border-radius:16px;background:#fff;text-align:left;transition:border-color .16s,background-color .16s}.choice-card:hover{border-color:var(--blue);background:#f3f8ff}.choice-card:active{background:#e7f1ff}.choice-card:focus-visible{outline-offset:5px}.choice-photo{display:flex;align-items:center;justify-content:center;width:100%;height:clamp(280px,49svh,530px);background:#edf1f3;border-radius:15px 15px 0 0;overflow:hidden}.choice-photo img{display:block;width:100%;height:100%;object-fit:contain}.choice-caption{display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%;min-height:78px;padding:18px 22px;font-size:21px;font-weight:700;line-height:1.3}.choice-caption>span{min-width:0;overflow-wrap:break-word}.choice-caption svg{width:25px;height:25px;color:var(--blue);stroke-width:2;flex-shrink:0}#chooser-hint{margin:22px auto 0;max-width:60ch;font-size:15px;line-height:1.5;color:var(--muted);text-align:center;text-wrap:balance}
@media(max-width:1200px) and (min-width:601px){.topbar{gap:12px;padding:12px 20px}#brand{width:146px}.topbar h1{font-size:18px}#mode-switch button{padding:8px 10px;font-size:13px}}
@media(max-width:900px) and (min-width:601px){.topbar{grid-template-columns:auto minmax(0,1fr) auto}.topbar .language{grid-column:3;grid-row:1/3}#mode-switch{grid-column:1/3;grid-row:2;justify-self:start}.topbar h1{grid-column:2;grid-row:1}.chooser-content{margin-top:28px}.choice-caption{font-size:18px;padding:16px;min-height:84px}.choice-grid{gap:18px}}
@media(max-width:600px){.topbar{grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;padding:9px 14px}.topbar #brand{grid-column:1;grid-row:1}.topbar h1{grid-column:1;grid-row:2;font-size:17px}.topbar .language{grid-column:2;grid-row:1/3}#mode-switch{grid-column:1/3;grid-row:3;margin-top:3px;width:100%}#mode-switch button{flex:1;min-width:0;font-size:12px;min-height:40px;padding:8px;white-space:normal}#mode-chooser{padding:14px 18px max(20px,env(safe-area-inset-bottom))}.chooser-header{min-height:40px}#choice-brand{width:164px;max-height:29px}#choice-language-toggle{min-height:40px;font-size:12px;padding:8px;min-width:60px}.chooser-content{margin-top:22px}#chooser-question{font-size:28px;line-height:1.18;margin-bottom:20px}.choice-grid{grid-template-columns:1fr;gap:14px}.choice-photo{height:clamp(160px,23svh,225px)}.choice-caption{font-size:17px;padding:12px 16px;min-height:55px;gap:12px}.choice-caption svg{width:22px;height:22px}#chooser-hint{font-size:13px;line-height:1.4;margin-top:17px}}
@media(max-height:520px) and (orientation:landscape){.topbar{display:flex;min-height:50px;padding:5px 12px;gap:10px}.topbar h1{font-size:14px;min-width:0;flex:1}#brand{width:115px}#mode-switch{margin:0;width:auto;flex-shrink:0;padding:2px}#mode-switch button{padding:6px 8px;font-size:11px;min-height:40px}.topbar .language{flex-shrink:0}#app{grid-template-rows:52px 66px minmax(100px,1fr) 88px}#mode-chooser{padding:10px 22px 16px}.chooser-header{min-height:40px}#choice-brand{width:150px}.chooser-content{margin-top:12px}#chooser-question{font-size:24px;margin-bottom:14px}.choice-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.choice-photo{height:clamp(120px,38svh,185px)}.choice-caption{min-height:50px;padding:10px 14px;font-size:15px}#chooser-hint{margin-top:12px;font-size:12px}}