:root{
  --neon-pink:#ff006e;
  --neon-blue:#00f5ff;
  --neon-green:#39ff14;
  --neon-purple:#b026ff;
  --neon-yellow:#fffd01;
  --dark-bg:#2a2a3e;
  font-family: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

@keyframes flicker {
  0%, 100% { opacity: 1; }
  41% { opacity: 0.8; }
  42% { opacity: 1; }
  43% { opacity: 0.9; }
  45% { opacity: 1; }
}

@keyframes glow-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.2); }
}

*{box-sizing:border-box}

body{
  margin:0;
  background: radial-gradient(ellipse at center, #8a8aae 0%, #5a5a7e 100%);
  display:flex;
  min-height:100vh;
  align-items:center;
  justify-content:center;
  padding:28px;
}

.page{
  width:1200px;
  max-width:96vw;
}

.header{
  text-align:center;
  margin-bottom:32px;
  animation: flicker 4s infinite;
}

.header h1{
  margin:0 0 16px 0;
  font-weight:900;
  font-size:42px;
  letter-spacing:4px;
  color:var(--neon-pink);
  text-shadow:
    0 0 10px var(--neon-pink),
    0 0 20px var(--neon-pink),
    0 0 40px var(--neon-pink),
    0 0 80px var(--neon-pink);
  text-transform: uppercase;
}

.instructions{
  margin:0;
  color:var(--neon-blue);
  font-size:14px;
  text-shadow:
    0 0 5px var(--neon-blue),
    0 0 10px var(--neon-blue);
}

.notebook{
  position:relative;
  display:flex;
  align-items:flex-start;
}

.left-spiral{
  display:none;
}

.sheet{
  background:rgba(40, 40, 50, 0.9);
  border:3px solid var(--neon-purple);
  box-shadow:
    0 0 10px var(--neon-purple),
    0 0 20px var(--neon-purple),
    inset 0 0 20px rgba(176, 38, 255, 0.1);
  padding:32px 40px;
  width:100%;
  min-height:640px;
  position:relative;
  border-radius:12px;
  animation: glow-pulse 3s infinite;
}

.questions{
  list-style:none;
  padding:0;
  margin:0;
}

.question{
  display:flex;
  gap:16px;
  align-items:flex-start;
  padding:16px 0;
  border-bottom:1px solid rgba(0, 245, 255, 0.2);
}

.qnum{
  width:50px;
  text-align:right;
  padding-right:14px;
  color:var(--neon-yellow);
  font-weight:900;
  font-size:20px;
  text-shadow:
    0 0 5px var(--neon-yellow),
    0 0 10px var(--neon-yellow);
}

.qbody{
  flex:1;
}

.behavior-image{
  width:100%;
  max-width:600px;
  height:auto;
  border-radius:8px;
  margin-bottom:16px;
  border:2px solid var(--neon-purple);
  box-shadow:
    0 0 10px var(--neon-purple),
    0 0 20px rgba(176, 38, 255, 0.3);
  display:block;
}

.prompt{
  margin:0 0 12px 0;
  font-size:18px;
  color:#e0e0e0;
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.3);
}

.inputLine{
  padding:12px;
  background:rgba(0, 245, 255, 0.05);
  border:2px solid var(--neon-blue);
  border-radius:6px;
  box-shadow:
    0 0 5px var(--neon-blue),
    inset 0 0 10px rgba(0, 245, 255, 0.1);
  transition:all .2s ease;
}

.inputLine:focus-within{
  box-shadow:
    0 0 10px var(--neon-blue),
    0 0 20px var(--neon-blue),
    inset 0 0 15px rgba(0, 245, 255, 0.2);
  border-color:var(--neon-green);
}

.inputLine input{
  width:100%;
  border:0;
  outline:0;
  font-size:20px;
  background:transparent;
  padding:4px 0;
  font-weight:700;
  color:var(--neon-green);
  text-shadow:
    0 0 5px var(--neon-green),
    0 0 10px var(--neon-green);
}

.inputLine input::placeholder{
  color:rgba(57, 255, 20, 0.4);
  text-shadow:none;
}

.actions{
  display:flex;
  gap:12px;
  align-items:center;
  margin-top:28px;
  flex-wrap:wrap;
}

.btn{
  background:rgba(255, 0, 110, 0.2);
  color:var(--neon-pink);
  border:2px solid var(--neon-pink);
  padding:14px 24px;
  border-radius:8px;
  cursor:pointer;
  font-weight:700;
  font-size:16px;
  text-transform:uppercase;
  letter-spacing:1px;
  transition:all .2s ease;
  box-shadow:
    0 0 10px var(--neon-pink),
    inset 0 0 10px rgba(255, 0, 110, 0.1);
}

.btn:hover{
  background:rgba(255, 0, 110, 0.4);
  box-shadow:
    0 0 20px var(--neon-pink),
    0 0 40px var(--neon-pink),
    inset 0 0 20px rgba(255, 0, 110, 0.2);
  transform:translateY(-2px);
}

.btn.ghost{
  background:rgba(0, 245, 255, 0.1);
  border:2px solid var(--neon-blue);
  color:var(--neon-blue);
  box-shadow:
    0 0 10px var(--neon-blue),
    inset 0 0 10px rgba(0, 245, 255, 0.1);
}

.btn.ghost:hover{
  background:rgba(0, 245, 255, 0.2);
  box-shadow:
    0 0 20px var(--neon-blue),
    0 0 40px var(--neon-blue);
}

.score{
  margin-left:auto;
  color:var(--neon-green);
  font-weight:900;
  background:rgba(57, 255, 20, 0.1);
  padding:12px 20px;
  border-radius:8px;
  border:2px solid var(--neon-green);
  box-shadow:
    0 0 10px var(--neon-green),
    0 0 20px var(--neon-green);
  text-shadow:
    0 0 5px var(--neon-green),
    0 0 10px var(--neon-green);
  font-size:18px;
}

.answer-key summary,
.discussion summary{
  cursor:pointer;
  font-weight:700;
  margin-top:24px;
  color:var(--neon-purple);
  text-shadow:
    0 0 5px var(--neon-purple),
    0 0 10px var(--neon-purple);
  font-size:16px;
  text-transform:uppercase;
  letter-spacing:2px;
}

.answer-key[open] #keyList,
.answer-key[open] { aria-hidden: false; }

#keyList{
  margin:12px 0 0 0;
  padding-left:24px;
  color:#c0c0c0;
}

#keyList li{
  margin:8px 0;
  font-size:16px;
  color:var(--neon-yellow);
  text-shadow: 0 0 3px var(--neon-yellow);
}

.discussion ul{
  color:#c0c0c0;
  line-height:1.8;
  font-size:16px;
}

.discussion ul li{
  margin:8px 0;
  text-shadow: 0 0 2px rgba(255, 253, 1, 0.3);
}

.footer{
  margin-top:24px;
  text-align:center;
  color:var(--neon-blue);
  font-size:15px;
  text-shadow:
    0 0 5px var(--neon-blue),
    0 0 10px var(--neon-blue);
  padding:16px;
  border-top:2px solid rgba(0, 245, 255, 0.3);
}

@media (max-width:720px){
  .header h1{ font-size:28px; }
  .sheet{min-height:760px;padding:20px}
  .qnum{width:40px; font-size:16px;}
}