.canvas-container{background:#fff;border:1px solid #e1e8f0;border-radius:8px;box-shadow:0 2px 10px rgba(30,58,138,.1);margin:1.5rem auto;max-width:600px;overflow:hidden;padding:20px;position:relative;transition:all .25s cubic-bezier(.4,0,.2,1);width:95%}.canvas-container:hover{border-color:#c7d2fe;box-shadow:0 6px 20px rgba(30,58,138,.15);transform:translateY(-1px)}#coordinateCanvas{background-color:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;display:block;height:auto;max-height:400px;transition:all .3s ease;width:100%}.canvas-container:hover #coordinateCanvas{border-color:#93c5fd;box-shadow:0 2px 8px rgba(59,130,246,.1)}#mapContainer,.legend-container{margin-bottom:1rem}.legend-container{background:#fff;border:1px solid #e2e8f0;border-radius:6px;box-shadow:0 2px 4px rgba(0,0,0,.05);margin-top:0;max-height:200px;overflow-y:auto;padding:12px 16px}.legend-title{border-bottom:1px solid #e2e8f0;color:#1e293b;font-size:14px;font-weight:700;margin-bottom:10px;padding-bottom:6px}.legend-items{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}.legend-item{align-items:center;display:flex;padding:4px 0}.legend-color{border:1px solid rgba(0,0,0,.1);border-radius:3px;height:16px;margin-right:8px;width:16px}.legend-label{color:#334155;font-size:12px}@media (max-width:768px){.canvas-container{border-radius:6px;margin:1rem auto;padding:16px;width:98%}.canvas-container:hover{transform:none}.legend-items{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}}@media (max-width:1024px){.canvas-container{max-width:95%}}@media (prefers-color-scheme:dark){.canvas-container{background:#1e293b;border-color:#334155;box-shadow:0 2px 10px rgba(0,0,0,.25)}.canvas-container:hover{border-color:#475569;box-shadow:0 6px 20px rgba(0,0,0,.35)}#coordinateCanvas{background-color:#0f172a;border-color:#334155}.canvas-container:hover #coordinateCanvas{border-color:#475569;box-shadow:0 2px 8px rgba(100,116,139,.2)}}