*{box-sizing:border-box;margin:0;padding:0}html{font-size:14.4px}body{color:#333;background-color:#f0f0f0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}#app{width:100vw;height:100vh;display:flex;overflow:hidden}#sidebar{z-index:10;background-color:#fff;flex-direction:column;gap:18px;width:270px;padding:18px;display:flex;box-shadow:2px 0 5px #0000001a}#sidebar h1{color:#2c3e50;font-size:1.5rem}#sidebar p{color:#666;font-size:.9rem;line-height:1.4}.controls{gap:10px;display:flex}button{color:#fff;cursor:pointer;background-color:#3498db;border:none;border-radius:4px;flex:1;padding:10px 15px;font-weight:700}button:hover{background-color:#2980b9}#reset-btn{background-color:#f39c12}#reset-btn:hover{background-color:#d68910}#clear-btn{background-color:#e74c3c}#clear-btn:hover{background-color:#c0392b}.stats{background-color:#f8f9fa;border:1px solid #e9ecef;border-radius:4px;padding:15px}.inputs{background-color:#f8f9fa;border:1px solid #e9ecef;border-radius:4px;flex-direction:column;gap:12px;padding:15px;display:flex}.input-group{flex-direction:column;gap:2px;display:flex}.input-header{color:#2c3e50;justify-content:space-between;font-size:.85rem;font-weight:500;display:flex}.input-header span{color:#666;font-family:monospace}.inputs input[type=range]{width:100%;margin:0}.stats p{color:#333;margin-bottom:5px;font-family:monospace;font-size:1rem}#canvas-container{background-color:#e2e8f0;flex:1;justify-content:center;align-items:center;min-width:0;min-height:0;display:flex;position:relative}canvas{background-color:#fff;box-shadow:0 4px 6px #0000001a}#right-panel{z-index:10;background-color:#fff;flex-direction:column;gap:18px;width:315px;padding:18px;display:flex;box-shadow:-2px 0 5px #0000001a}.stats h3{color:#2c3e50;margin-bottom:10px;font-size:1.2rem}.stats hr{border:0;border-top:1px solid #e9ecef;margin:10px 0}.stats p.color-rope{color:#e74c3c;font-weight:500}.stats p.color-belayer{color:#2980b9;font-weight:500}.stats p.color-anchor{color:#27ae60;font-weight:500}.stats p.color-climber{color:#8e44ad;font-weight:500}.sidebar h4{color:#7f8c8d;text-transform:uppercase;letter-spacing:.5px;margin-top:15px;margin-bottom:5px;font-size:.9rem}.badge{text-transform:uppercase;letter-spacing:1px;text-align:center;box-sizing:border-box;border-radius:20px;width:100%;margin-bottom:10px;padding:8px 16px;font-size:1.1rem;font-weight:700;display:inline-block}.badge-safe{color:#155724;background-color:#d4edda;border:1px solid #c3e6cb}.badge-warn{color:#856404;background-color:#fff3cd;border:1px solid #ffeeba}.badge-danger{color:#721c24;background-color:#f8d7da;border:1px solid #f5c6cb}.stats h4{color:#34495e;margin-bottom:8px;font-size:1rem}.warnings{margin:0;padding-left:0;list-style-type:none}.warnings li{border-radius:4px;margin-bottom:4px;padding:6px 10px;font-size:.9rem}.warning-none{color:#6c757d;font-style:italic}.warning-item{color:#721c24;background-color:#f8d7da;border-left:3px solid #dc3545}.warning-info{color:#856404;background-color:#fff3cd;border-left:3px solid #ffc107}@media (width<=1024px){#app{flex-direction:column;height:auto;overflow-y:auto}#sidebar,#right-panel{width:100%;max-width:100%;box-shadow:none;border-bottom:1px solid #ddd}#canvas-container{height:60vh;min-height:400px}#sidebar .sidebar{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:15px;display:grid}.sidebar h4{grid-column:1/-1;margin-top:5px}}