* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: #0d1117;
  color: #c9d1d9;
  padding: 20px;
}
.container {
  max-width: 1600px;
  margin: 0 auto;
}
h1 {
  margin-bottom: 10px;
  color: #58a6ff;
  display: flex;
  align-items: center;
  gap: 10px;
}
.subtitle {
  font-size: 14px;
  color: #8b949e;
  margin-bottom: 20px;
}
.badge {
  font-size: 12px;
  padding: 4px 8px;
  background: #238636;
  border-radius: 4px;
  color: white;
}
.input-section {
  background: #161b22;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #30363d;
}
.input-group {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}
input {
  flex: 1;
  padding: 12px;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 6px;
  color: #c9d1d9;
  font-family: 'Courier New', monospace;
  font-size: 14px;
}
input:focus {
  outline: none;
  border-color: #58a6ff;
}
button {
  padding: 10px 20px;
  background: #238636;
  border: none;
  border-radius: 6px;
  color: white;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.2s;
}
button:hover { background: #2ea043; }
.examples { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 15px; }
.example-section { margin-bottom: 10px; }
.example-label { color: #8b949e; font-size: 12px; margin-right: 10px; font-weight: 600; }
.example-btn {
  padding: 6px 12px;
  background: #21262d;
  border: 1px solid #30363d;
  border-radius: 6px;
  color: #58a6ff;
  cursor: pointer;
  font-size: 12px;
  font-family: 'Courier New', monospace;
}
.example-btn:hover { background: #30363d; }
.example-btn.bonus { border-color: #f85149; color: #f85149; }

#tree-container {
  background: #161b22;
  border-radius: 8px;
  border: 1px solid #30363d;
  overflow: auto;
  min-height: 600px;
}
#tree { display: block; margin: 0 auto; }
.node-circle { cursor: pointer; transition: all 0.3s; }
.node-circle:hover { r: 30; }
.link { fill: none; stroke: #30363d; stroke-width: 2; }
.node-text { pointer-events: none; font-family: 'Courier New', monospace; font-size: 11px; font-weight: 600; }

.legend { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 15px; padding: 15px; background: #0d1117; border-radius: 6px; }
.legend-item { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.legend-color { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #0d1117; }