.container{max-width:1200px;margin:0 auto;background-color:#fff;border-radius:10px;box-shadow:0 5px 15px rgba(0,0,0,.1);overflow:hidden}header{background:linear-gradient(135deg,#6a11cb,#2575fc);color:#fff;padding:25px 30px;text-align:center}h1{font-size:2.2rem;margin-bottom:10px}.subtitle{font-size:1.1rem;opacity:.9}.content{padding:25px;display:flex;flex-direction:column;gap:25px}.canvas-container{position:relative;border:1px solid #e1e5eb;border-radius:8px;overflow:hidden;background-color:#f9fafc}canvas{display:block;width:100%;height:600px;cursor:crosshair}.controls{display:flex;flex-wrap:wrap;gap:15px;align-items:center;background-color:#f8f9fa;padding:20px;border-radius:8px;border:1px solid #e9ecef}.control-group{display:flex;flex-direction:column;gap:8px}label{font-weight:600;font-size:.95rem}input,select{padding:10px 15px;border:1px solid #ced4da;border-radius:6px;font-size:1rem;background-color:#fff}input:focus,select:focus{outline:none;border-color:#6a11cb;box-shadow:0 0 0 3px rgba(106,17,203,.1)}.info{background-color:#e8f4fd;border-left:4px solid #2196f3;padding:18px;border-radius:6px;margin-top:10px}.info h3{color:#0d47a1;margin-bottom:10px}.coordinates{font-family:monospace;font-size:.9rem;white-space:pre-wrap;background-color:#f1f3f4;padding:15px;border-radius:6px;max-height:200px;overflow-y:auto;margin-top:10px}.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:15px;margin-top:15px}.stat-card{background:linear-gradient(135deg,#f5f7fa,#c3cfe2);padding:15px;border-radius:8px;text-align:center}.stat-value{font-size:1.8rem;font-weight:700;color:#2c3e50}.stat-label{font-size:.9rem;color:#7f8c8d;margin-top:5px}.coordinate-system{display:flex;align-items:center;gap:10px;margin-top:10px;padding:10px;background-color:#f0f7ff;border-radius:6px}.coordinate-example{font-family:monospace;background-color:#2c3e50;color:#fff;padding:5px 10px;border-radius:4px}footer{text-align:center;padding:20px;color:#7f8c8d;font-size:.9rem;border-top:1px solid #eee;margin-top:20px}@media (max-width:768px){.content{padding:15px;width:calc(100% - 30px)}canvas{height:500px}.controls{flex-direction:column;align-items:flex-start}}