* { box-sizing: border-box; }

html,
body { margin: 0; padding: 0; background: transparent; }
body { font-family: Arial, Helvetica, sans-serif; color: #172334; }
body.pi-iframe-body { overflow: hidden; }

.pi-line-widget { --pi-accent: #0a5f99; --pi-accent-2: #158bd3; --pi-text: #172334; --pi-muted: #657184; position: relative; width: 100%; max-width: 1680px; margin: 0 auto; padding: 8px 0 22px; overflow: visible; }
.demo-page { width: min(1240px, calc(100% - 32px)); margin: 36px auto; }
.demo-page h1 { margin: 0 0 8px; font-size: clamp(24px, 2.4vw, 38px); line-height: 1.15; }
.demo-note { margin: 0 0 18px; color: #58697b; }
.pi-mobile-hint { display: none; margin: 0 10px 10px; padding: 10px 12px; border: 1px solid rgba(10, 95, 153, 0.18); border-radius: 12px; background: rgba(10, 95, 153, 0.07); color: #24435b; font-size: 14px; line-height: 1.35; }
.pi-line-stage { position: relative; width: 100%; overflow: visible; line-height: 0; border-radius: 14px; box-shadow: 0 22px 65px rgba(16, 38, 61, .16); background: #eef4f8; }
.pi-line-image { display: block; width: 100%; height: auto; max-width: none; max-height: none !important; border-radius: 14px; user-select: none; pointer-events: none; }
.pi-hotspot { position: absolute; left: var(--x); top: var(--y); width: clamp(30px, 3.1vw, 42px); height: clamp(30px, 3.1vw, 42px); padding: 0; border: 0; border-radius: 999px; background: transparent; transform: translate(-50%, -50%); cursor: pointer; overflow: visible; z-index: 5; outline: none; font: inherit; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.pi-hotspot::after { content: ""; position: absolute; inset: -14px; border-radius: inherit; }
.pi-dot { position: absolute; inset: 0; display: block; }
.pi-dot__pulse { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(93, 216, 255, .82); background: rgba(18, 156, 226, .24); transform: translate(-50%, -50%) scale(.45); animation: piPulse 2.25s ease-out infinite; pointer-events: none; }
.pi-dot__pulse--two { width: 58px; height: 58px; border-color: rgba(93, 216, 255, .45); background: rgba(18, 156, 226, .14); animation-delay: .82s; }
.pi-dot__core { position: absolute; left: 50%; top: 50%; width: clamp(26px, 2.45vw, 34px); height: clamp(26px, 2.45vw, 34px); border-radius: 999px; display: grid; place-items: center; transform: translate(-50%, -50%) scale(1); color: #fff; font-size: clamp(11px, 1.1vw, 14px); font-weight: 800; line-height: 1; background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.75), rgba(255,255,255,0) 32%), linear-gradient(135deg, #149be7, #045b9d); border: 2px solid rgba(255,255,255,.92); box-shadow: 0 0 0 4px rgba(34, 171, 235, .22), 0 8px 22px rgba(0, 55, 99, .38), 0 0 22px rgba(55, 206, 255, .62); transition: transform .22s ease, box-shadow .22s ease, background .22s ease; pointer-events: none; }
.pi-hotspot:hover, .pi-hotspot:focus-visible, .pi-hotspot.is-active { z-index: 20; }
.pi-hotspot:hover .pi-dot__core, .pi-hotspot:focus-visible .pi-dot__core, .pi-hotspot.is-active .pi-dot__core { transform: translate(-50%, -50%) scale(1.13); box-shadow: 0 0 0 6px rgba(34, 171, 235, .28), 0 12px 28px rgba(0, 55, 99, .42), 0 0 34px rgba(55, 206, 255, .82); }
@keyframes piPulse { 0% { opacity: .76; transform: translate(-50%, -50%) scale(.52); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.46); } }
.pi-floating-tooltip { position: absolute; z-index: 20; width: min(390px, calc(100% - 24px)); padding: 16px 18px 17px; border: 1px solid rgba(10, 95, 153, 0.14); border-radius: 16px; background: rgba(255, 255, 255, 0.96); color: var(--pi-text); box-shadow: 0 18px 50px rgba(12, 33, 55, 0.22); line-height: 1.42; backdrop-filter: blur(12px); }
.pi-floating-tooltip::before { content: ""; position: absolute; top: -8px; left: var(--pi-arrow-left, 50%); width: 16px; height: 16px; transform: translateX(-50%) rotate(45deg); border-left: 1px solid rgba(10, 95, 153, 0.14); border-top: 1px solid rgba(10, 95, 153, 0.14); background: rgba(255, 255, 255, 0.96); }
.pi-floating-tooltip.is-above::before { top: auto; bottom: -8px; border: 0; border-right: 1px solid rgba(10, 95, 153, 0.14); border-bottom: 1px solid rgba(10, 95, 153, 0.14); }
.pi-tooltip-close { position: absolute; top: 7px; right: 9px; width: 28px; height: 28px; border: 0; border-radius: 999px; background: rgba(10, 95, 153, 0.08); color: #1d4868; font-size: 22px; line-height: 1; cursor: pointer; }
.pi-tooltip-close:hover, .pi-tooltip-close:focus-visible { background: rgba(10, 95, 153, 0.14); }
.pi-tooltip-kicker { margin: 0 34px 6px 0; color: var(--pi-accent); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.3; }
.pi-tooltip-title { margin: 0 28px 8px 0; font-size: 18px; line-height: 1.2; font-weight: 800; }
.pi-tooltip-text { color: var(--pi-muted); font-size: 14px; line-height: 1.48; }
@media (max-width: 768px) { .pi-line-widget { padding: 0 0 18px; } .pi-mobile-hint { display: block; } .pi-line-image, .pi-line-stage { border-radius: 10px; } .pi-hotspot { width: 28px; height: 28px; } .pi-floating-tooltip { width: calc(100% - 20px); padding: 14px 15px 15px; border-radius: 14px; } .pi-tooltip-title { font-size: 16px; } .pi-tooltip-text { font-size: 13px; } }