.twp-wrap{max-width:1100px;margin:0 auto;text-align:center}.twp-header{margin:1.5rem 0}.twp-header h2{font-size:clamp(2rem,5vw,3.8rem);line-height:1.05;margin:.25rem 0}.twp-header p{margin:.5rem auto 1.25rem;color:#374151}.twp-photo-stage{position:relative;display:inline-block;max-width:100%}.twp-photo{display:block;max-width:100%;height:auto}.twp-dot{position:absolute;transform:translate(-50%,-50%);width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;padding:0;border-radius:50%;border:2px solid rgba(255,255,255,.9);box-shadow:0 1px 8px rgba(0,0,0,.45);cursor:pointer;color:#fff;line-height:1;text-align:center;text-shadow:0 1px 3px rgba(0,0,0,.8);transition:transform .15s ease,box-shadow .15s ease}.twp-dot span{display:block;font-size:13px;font-weight:800;line-height:1}.twp-dot:hover,.twp-dot.is-active{transform:translate(-50%,-50%) scale(1.1);box-shadow:0 2px 12px rgba(0,0,0,.55)}.twp-unknown{background:rgba(245,181,193,.42)}.twp-partial{background:rgba(246,211,155,.42)}.twp-complete{background:rgba(168,216,185,.42)}.twp-card{position:absolute;left:50%;bottom:1rem;transform:translateX(-50%);max-width:min(92%,420px);background:#fff;padding:1rem;border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,.25);text-align:left;z-index:5}.twp-card h3{margin:.1rem 2rem .35rem 0}.twp-card p{margin:.25rem 0;white-space:pre-line}.twp-card-close{position:absolute;right:.5rem;top:.4rem;border:0;background:transparent;font-size:1.6rem;cursor:pointer}.twp-card-hint{color:#6b7280}.twp-legend{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin:.75rem 0 1.5rem;font-size:.9rem;color:#4b5563}.twp-key{display:inline-block;width:12px;height:12px;border-radius:50%;vertical-align:-1px;margin-right:5px;border:1px solid rgba(255,255,255,.85);box-shadow:0 1px 3px rgba(0,0,0,.15)}@media (max-width:700px){.twp-dot{width:36px;height:36px}.twp-dot span{font-size:14px}.twp-card{position:fixed;bottom:1rem;z-index:9999}}