html, body {
  margin: 0; padding: 0; width: 600px; height: 600px; overflow: hidden;
  background: radial-gradient(circle at 50% -10%, rgba(0,220,255,.24), transparent 35%),
              radial-gradient(circle at 100% 100%, rgba(120,83,255,.18), transparent 35%),
              #020713;
  color: #eef8ff; font-family: Arial, Helvetica, sans-serif;
}
#app { width: 600px; height: 600px; box-sizing: border-box; padding: 18px; display: flex; flex-direction: column; }
header { text-align: center; margin-bottom: 10px; }
.eyebrow { font-size: 11px; letter-spacing: 2px; color: #75ddff; opacity: .9; }
h1 { margin: 2px 0; font-size: 32px; font-weight: 900; text-shadow: 0 0 18px rgba(0,205,255,.6); }
p { margin: 0; color: #a9bbcf; font-size: 13px; }
.panel {
  flex: 1; border: 1px solid rgba(140,180,210,.24); border-radius: 24px;
  background: rgba(8,20,36,.76);
  box-shadow: inset 0 0 30px rgba(255,255,255,.04), 0 14px 45px rgba(0,0,0,.36);
  padding: 16px; box-sizing: border-box; display: flex; flex-direction: column;
}
.hidden { display: none; }
.progress { margin-bottom: 16px; }
#progressText { color: #b8cde2; font-size: 14px; }
.progressTrack { margin-top: 8px; height: 9px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
#progressFill { height: 100%; width: 10%; background: linear-gradient(90deg, #00d7ff, #8c7bff); border-radius: 99px; box-shadow: 0 0 14px rgba(0,215,255,.55); }
.question { min-height: 116px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 26px; line-height: 1.15; font-weight: 850; }
.answers, .nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.answers { margin-top: 8px; }
.nav { margin-top: auto; }
.threeNav { grid-template-columns: 1fr 1fr 1fr; }
.fourNav { grid-template-columns: 1fr 1fr 1fr 1fr; gap: 8px; }
.screenBtn {
  border-radius: 16px; border: 2px solid rgba(160,195,225,.32);
  background: rgba(255,255,255,.06); color: #eef8ff; font-weight: 900;
  outline: none;
}
.answers .screenBtn { height: 70px; font-size: 24px; }
.nav .screenBtn { height: 48px; font-size: 13px; }
.screenBtn.selected {
  border-color: #00d7ff; background: rgba(0,130,190,.35);
  box-shadow: 0 0 22px rgba(0,215,255,.45);
  transform: translateY(-2px);
}
.screenBtn.activeAnswer {
  border-color: #8c7bff;
  box-shadow: inset 0 0 18px rgba(140,123,255,.28);
}
.screenBtn.danger { color: #ffd2d2; }
h2 { margin: 0 0 8px; text-align: center; font-size: 26px; color: #75ddff; }
.resultsList { overflow: hidden; display: flex; flex-direction: column; gap: 7px; }
.resultItem {
  border-radius: 13px; padding: 7px 9px; background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.10);
}
.resultItem.selected {
  border-color: #00d7ff;
  box-shadow: 0 0 16px rgba(0,215,255,.35);
}
.resultItem.removed {
  opacity: .38;
  text-decoration: line-through;
}
.resultTitle { font-size: 14px; font-weight: 900; }
.resultWhy { margin-top: 2px; font-size: 11px; color: #aec2d5; }
.badge {
  float: right; font-size: 10px; color: #ffe2a2;
}
.hint {
  margin-top: auto; margin-bottom: 8px; padding: 7px; border-radius: 12px;
  background: rgba(255,205,93,.10); border: 1px solid rgba(255,205,93,.22);
  color: #ffe2a2; text-align: center; font-size: 12px;
}
#textOutput {
  flex: 1; resize: none; border-radius: 16px; border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.07); color: #eef8ff; padding: 12px;
  font-size: 14px; line-height: 1.35; outline: none;
}
footer { height: 32px; display: flex; align-items: end; justify-content: space-around; color: #7f92a8; font-size: 12px; }