.hotspot-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hotspot{position:absolute;width:44px;height:44px;padding:8px;transform:translate(-50%,-50%);border:0;background:none;pointer-events:auto;touch-action:none;display:grid;place-items:center}
.hotspot span{display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:#d5ff70;color:#15231b;border:1px solid #e7ffb5;box-shadow:0 1px 5px #000b;font-size:11px;font-weight:700}
.hotspot:focus-visible{outline:2px solid #fff;border-radius:50%}
.technical-sheet{display:block;margin:14px auto 0;padding:12px 18px;background:transparent;color:#c9e98e;border:1px solid #49613e;border-radius:20px;font-size:11px;letter-spacing:1px}
#hotspot-dialog{background:#182b23f0;backdrop-filter:blur(12px);color:#eef4ed;border:1px solid #5e7844;max-height:80svh;overflow:auto}
#hotspot-dialog::backdrop{background:#0005}#hotspot-dialog h2{font-size:20px;color:#d5ff70}#hotspot-dialog h3{font-size:13px;color:#d5ff70;margin:24px 0 5px}#hotspot-dialog p{font-size:15px;line-height:1.6}#hotspot-dialog .demo-note{font-size:11px;color:#b0c2b6;margin:22px 0}#hotspot-close{width:100%}
#viewer{height:calc(100svh - 385px);min-height:280px}

#preview-viewer{height:260px;position:relative;touch-action:none;margin-top:12px;overflow:hidden;border-radius:14px}
#preview-viewer canvas{width:100%;height:100%;display:block;touch-action:none}
#preview-viewer img{width:100%;height:100%;object-fit:contain}
#preview-loading{position:absolute;top:40%;left:10px;right:10px;text-align:center;font-size:12px}
.preview-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}
#detail-hint{font-size:11px;line-height:1.5;color:#b7c9b9;margin:0;text-align:left}
.expand-label{min-height:44px;min-width:108px;padding:10px 12px;background:#263d2c;border:1px solid #49613e;border-radius:14px;font-size:12px;white-space:nowrap;margin-left:auto}
.expand-label span{font-size:22px;margin-left:5px}
body[data-screen=detail] header{padding-top:12px;padding-bottom:10px}
body[data-screen=detail] .logo{width:48px;height:48px}
body[data-screen=detail] main{max-width:900px;padding-top:0}
#detail .back{margin-bottom:0}#detail h2{font-size:20px;margin:4px 0 10px}
#viewer{height:calc(100svh - 290px);min-height:360px}
@media(max-width:350px){#detail-hint{font-size:10px}.preview{padding:14px}.expand-label{min-width:102px}}

body[data-screen=detail]{overflow:hidden;overscroll-behavior:none}
body[data-screen=detail]>header,body[data-screen=detail]>footer,body[data-screen=detail]>#menu-panel{display:none!important}
body[data-screen=detail] main{margin:0;padding:0;max-width:none}
#detail:not([hidden]){position:fixed;inset:0;width:100%;height:100vh;height:100dvh;z-index:50;background:radial-gradient(ellipse at center,#263d31,#0d1915 80%);overflow:hidden}
#detail #viewer{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;border:0;border-radius:0;background:transparent;touch-action:none;user-select:none;-webkit-user-select:none}
#viewer canvas{display:block;touch-action:none}
#detail-back{position:absolute;z-index:3;top:max(12px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));margin:0;padding:12px 16px;background:#102019d9;border:1px solid #52674a;border-radius:24px}
#detail-name,#detail .gesture-hint{display:none}
#detail .technical-sheet{position:absolute;z-index:3;bottom:max(14px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);background:#102019d9;margin:0;white-space:nowrap}