body{font-family:Arial,sans-serif;margin:0;padding:0;background-color:#121212;color:#f0f0f0}.container{max-width:1200px;margin:0 auto;padding:20px}header{text-align:center;margin-bottom:20px}h1{margin:0;color:#4fc3f7}.controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-bottom:20px;background-color:#212121;padding:15px;border-radius:5px}.controls>div{margin-right:20px}label{margin-right:10px}button{background-color:#4fc3f7;color:#121212;border:none;padding:10px 15px;border-radius:4px;cursor:pointer;font-weight:700}button:hover{background-color:#81d4fa}input,select{background-color:#333;color:#f0f0f0;border:1px solid #555;padding:8px;border-radius:4px}#canvasContainer{width:100%;display:flex;justify-content:center;background-color:#1e1e1e;border-radius:5px;overflow:hidden}canvas{display:block}.debug-panel{margin-top:20px;background-color:#212121;padding:15px;border-radius:5px}.debug-panel h3{margin-top:0;color:#4fc3f7}.debug-content{max-height:300px;overflow-y:auto;padding:10px;background-color:#333;border-radius:5px;margin-top:10px;font-family:monospace;font-size:12px;color:#e0e0e0}.debug-content pre{margin:0;white-space:pre-wrap}.point-highlight{color:#72f793;font-weight:700}