@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

body {
  background: #1e1e2e;
  font-family: 'Poppins', sans-serif;
}

h1 {
  color: #cdd6f4;
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  margin-top: 2rem;
}

.wrap {
  font-family: 'Poppins', sans-serif;
  line-height: 1.4;
  margin: 0 auto;
  max-width: 1000px;
}

svg {
  background: #181825;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

rect {
  fill: #cdd6f4;
}

line {
  stroke: #cdd6f4;
}

.guide {
  stroke: #f38ba8;
}

text {
  fill: #cdd6f4;
  font-size: 9px;
  font-family: 'Poppins', sans-serif;
}

#feedback {
  transform: translate(20px, 60px);
}

label {
  color: #cdd6f4;
  font-size: 9px;
  font-family: 'Poppins', sans-serif;
  display: block;
  margin-bottom: 3px;
  margin-left: 20px;
}

input {
  width: 80px;
  font-size: 11px;
  background: #313244;
  color: #cdd6f4;
  border: 1px solid #45475a;
  border-radius: 4px;
  padding: 0px 0px 0px 0px;
  margin-bottom: 8px;
  margin-left: 20px;
  font-family: 'Poppins', sans-serif;
}

#article {
  color: #cdd6f4;
  font-family: 'Poppins', sans-serif;
  padding: 3% 13% 1% 13%;
  line-height: 1.6;
}

a { 
  color: #89b4fa;
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: #b4befe;
  text-decoration: underline;
}