:root{
  /* chalkboard palette */
  --bg-1: #0f2220;          /* dark slate */
  --bg-2: #0a1614;
  --card: rgba(255,255,255,0.02);
  --chalk-white: #e9efe8;   /* pale chalk */
  --chalk-muted: rgba(233,239,232,0.85);
  --chalk-green: #b8f2c8;   /* chalky green for titles */
  --chalk-yellow: #f7e8a6;  /* subtle chalk highlight */
  --chalk-red: #ffb3b3;     /* soft red chalk for consequences */
  --chalk-blue: #b8d7ff;
  --glass-blur: 4px;
  --radius: 8px;
  --shadow-lg: 0 12px 30px rgba(0,0,0,0.55);
  --ui-gap: 12px;
  --base-font-size: 18px;
}
*{box-sizing:border-box}
html,body,#app{height:100%;margin:0;
  /* dark chalkboard background with subtle eraser strokes and uploaded photo */
  background-color: var(--bg-1);
  /* put the uploaded image behind the chalkboard textures */
  background-image:
    url('/240_F_274763459_HADMcYrskkrAPtBDWqv4RHXz9QXjPoLX (1).jpg'),
    linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.6)),
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00)),
    radial-gradient(circle at 20% 10%, rgba(255,255,255,0.015), transparent 20%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.005), rgba(255,255,255,0.005) 1px, transparent 1px, transparent 60px);
  background-size: cover, cover, cover, cover, cover;
  background-position: center center, center, center, 20% 10%, 0 0;
  background-repeat: no-repeat;
  font-family: "Rock Salt", "Gloria Hallelujah", "Patrick Hand", system-ui, sans-serif;
  color: var(--chalk-white);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-size: var(--base-font-size);
}
.viewport{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:28px 20px;gap:12px;min-height:100vh;position:relative}

/* Slide card — blackboard panel */
.slide{
  width:100%;
  max-width:1200px;
  height:940px;
  background: linear-gradient(180deg, rgba(8,18,16,0.98), rgba(6,12,10,0.95));
  border-radius:10px;
  box-shadow:
    0 30px 70px rgba(0,0,0,0.6),
    inset 0 6px 18px rgba(255,255,255,0.02);
  padding:28px 28px 28px 28px;
  display:flex;
  flex-direction:column;
  gap:12px;
  overflow:hidden;
  position:relative;
  border:1px solid rgba(255,255,255,0.03);
  font-family: "Rock Salt", "Gloria Hallelujah", system-ui, sans-serif;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.008), transparent 40%),
    radial-gradient(circle at 10% 10%, rgba(255,255,255,0.02), transparent 15%);
}

/* subtle chalk smudges along the board edges to feel like a real blackboard */
.slide::before{
  content: "";
  position: absolute;
  left:8px;
  top:12px;
  bottom:12px;
  right:8px;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 8% 10%, rgba(255,255,255,0.02), transparent 12%),
    radial-gradient(circle at 90% 85%, rgba(255,255,255,0.01), transparent 12%);
  z-index:2;
  mix-blend-mode: screen;
  opacity:0.6;
}

/* faint erased chalk streaks */
.slide::after{
  content: "";
  position: absolute;
  left:12px;
  right:12px;
  top:12px;
  bottom:12px;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00)),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.002), rgba(255,255,255,0.002) 2px, transparent 2px, transparent 120px);
  pointer-events: none;
  z-index:1;
  mix-blend-mode: overlay;
}

/* header with chalky handwritten title */
.header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;z-index:10;position:relative}
.title{
  font-size:44px;
  font-weight:700;
  color:var(--chalk-green);
  letter-spacing:0.6px;
  margin:0;
  line-height:1.02;
  display:flex;
  align-items:center;
  gap:12px;
  font-family: "Rock Salt", "Gloria Hallelujah", serif;
  text-transform:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-shadow: 0 1px 0 rgba(0,0,0,0.6);
}
.title .pill{
  font-size:14px;
  padding:8px 12px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  color:white;
  box-shadow:0 6px 18px rgba(43,140,255,0.08);
  font-weight:700;
}

/* hero area becomes the main notebook content panel with ruled background */
.hero{
  width:100%;
  height:420px;
  background: transparent;
  border-radius:6px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  z-index:4;
  border:0;
  padding:0;
  box-shadow: none;
  margin-bottom:6px;
}

/* when there is an image, show the uploaded book/chalkboard photo as a large pasted photo */
.hero img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  border-radius:6px;
  border: none; /* removed heavy framed border */
  box-shadow: none; /* removed heavy shadow to avoid black box */
  transform: none;
  transition: transform 220ms ease;
  display:block;
  background-color:transparent;
}

/* placeholder no-image hero looks like notebook-lined block */
.hero.no-image{
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  background: linear-gradient(180deg, rgba(255,255,255,0.0), rgba(255,255,255,0.0));
  color:#11202a;
  font-family: "Patrick Hand", "Merriweather", serif;
  font-size:32px;
  font-weight:700;
  text-transform:none;
  letter-spacing:0.6px;
  padding:18px;
  box-shadow:none;
}

/* styling for slides without images: blackboard panel */
.hero.no-image{
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.45));
  color:var(--chalk-white);
  font-family: "Rock Salt", "Gloria Hallelujah", sans-serif;
  font-size:46px;
  font-weight:700;
  text-transform:none;
  letter-spacing:0.6px;
  padding:28px;
  box-shadow: inset 0 -6px 18px rgba(255,255,255,0.02);
  border-radius:6px;
  border: 1px solid rgba(255,255,255,0.03);
}

/* consequences area immediately under the hero image */
.consequences{
  width:100%;
  margin-top:6px;
  padding:12px 14px;
  border-radius:8px;
  background: transparent;
  border: none;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.consequences-title{
  font-size:20px;
  font-weight:700;
  color:var(--chalk-yellow);
  font-family: "Rock Salt", "Gloria Hallelujah", serif;
}
.consequences-list{
  margin:0;
  padding:0 0 0 20px;
  color: var(--chalk-red);
  font-size:22px;
  font-weight:700;
  line-height:1.25;
  font-family: "Rock Salt", "Gloria Hallelujah", serif;
}
.consequences-list li{
  margin-bottom:10px;
}

/* body area contains neon modals and bullets */
.body{display:flex;gap:20px;align-items:flex-start;justify-content:space-between}
.neon-modals{
  flex:1.6;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding-right:12px;

  /* ensure all statements are reachable: limit height and allow internal scrolling */
  max-height: 260px;
  overflow-y: auto;
  padding-right: 8px;
  -webkit-overflow-scrolling: touch;
}

/* subtle thin scrollbar that fits the chalkboard aesthetic */
.neon-modals::-webkit-scrollbar{ width:8px }
.neon-modals::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,0.06);
  border-radius:8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.neon-modals::-webkit-scrollbar-track{ background: transparent }
.neon-statement{
  font-size:28px;
  font-weight:700;
  color:var(--chalk-white);
  line-height:1.18;
  background: transparent;
  padding:12px 16px;
  border-radius:6px;
  border: 1px dashed rgba(255,255,255,0.03);
  box-shadow: none;
  position:relative;
  font-family: "Rock Salt", "Gloria Hallelujah", serif;
  letter-spacing:0.2px;
  text-shadow: 0 1px 0 rgba(0,0,0,0.6);
  border-left: 6px solid rgba(255,255,255,0.06);
}
.neon-statement::before{
  display:none;
}

/* left bullets area */
.left{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:10px;
  align-self:flex-start;
  min-width:300px;
}
.left p{
  margin:0;
  color:var(--chalk-muted);
  line-height:1.45;
  font-size:20px;
  font-weight:700;
  padding:10px 12px;
  border-radius:6px;
  background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent);
  border: 1px solid rgba(255,255,255,0.02);
  box-shadow: none;
}

/* footer minimal */
.footer{display:flex;justify-content:space-between;align-items:center;margin-top:6px}
.note{color:var(--muted);font-size:13px}

/* controls modernized */
.controls{
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:6px;
  background:transparent;
}
.controls button{
  background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border: none;
  color:var(--text);
  padding:10px 14px;
  border-radius:12px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  box-shadow: 0 6px 20px rgba(3,6,12,0.5);
  transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms;
}
.controls button:hover{ transform: translateY(-3px); box-shadow: 0 18px 40px rgba(3,6,12,0.6) }
.controls label{font-size:13px;color:var(--muted);margin-left:6px}
.controls input[type="range"]{width:160px}

/* progress bar refined */
.progress-wrap{
  position:absolute;left:22px;right:22px;bottom:16px;height:8px;background:linear-gradient(90deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));border-radius:8px;overflow:hidden;border:1px solid rgba(255,255,255,0.02)
}
.progress{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width 140ms linear;box-shadow: inset 0 2px 6px rgba(0,0,0,0.25);}

/* count */
.count{position:absolute;right:28px;top:22px;color:var(--chalk-muted);font-size:16px;backdrop-filter:blur(2px);padding:8px 12px;border-radius:999px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.03)}

/* subtle animations */
.fade-in{animation:fadeIn 420ms cubic-bezier(.22,.9,.28,1) both}
.fade-out{animation:fadeOut 360ms cubic-bezier(.3,.8,.25,1) both}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px) scale(.998)}to{opacity:1;transform:none}}
@keyframes fadeOut{from{opacity:1}to{opacity:0;transform:translateY(-6px) scale(.997)}}

/* responsive tweaks */
@media (max-width:1100px){
  .slide{height:calc(100vh - 80px);padding:10px;border-radius:12px}
  .title{font-size:34px} /* responsive scale-down for smaller screens */
  .hero{height:680px} /* keep hero very prominent on smaller screens */
  .neon-statement{font-size:22px;padding:12px}
  .left p{font-size:18px;padding:10px}
  .body{flex-direction:column}
  .left{min-width:unset;width:100%}
}

/* Glossary modal styles */
.controls button#glossary{
  padding:10px 16px;
  font-weight:800;
  background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.03);
}

.glossary-modal{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:120;
  pointer-events:none;
  opacity:0;
  transition:opacity 200ms ease;
}
.glossary-modal.open{ pointer-events:auto; opacity:1; }

.glossary-backdrop{
  position:absolute;inset:0;background:rgba(2,6,12,0.6);backdrop-filter:blur(6px);
}

.glossary-card{
  position:relative;
  width:min(920px, calc(100% - 48px));
  max-height:80vh;
  overflow:auto;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:12px;
  padding:18px;
  box-shadow: 0 28px 80px rgba(2,6,23,0.7);
  z-index:130;
  border:1px solid rgba(255,255,255,0.04);
}

.glossary-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:12px}
.glossary-title{font-family:"Cinzel",sans-serif;font-size:26px;font-weight:900;letter-spacing:1px}
.glossary-close{background:transparent;border:none;color:var(--text);font-size:20px;cursor:pointer;padding:8px;border-radius:8px}

.glossary-list{
  display:flex;
  flex-direction:column;
  gap:12px;
  font-size:16px;
  color:var(--chalk-muted);
  padding-bottom:8px;

  /* easier-to-read, neutral sans-serif stack for glossary content */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height:1.45;
}

.glossary-entry{
  padding:14px;
  border-radius:10px;
  background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));
  border:1px solid rgba(255,255,255,0.02);
  color:var(--chalk-white);
}

.glossary-term{
  font-weight:700;
  color:var(--chalk-white);
  font-size:17px;
  margin-bottom:6px;
  letter-spacing:0.2px;
}

.glossary-def{
  font-weight:500;
  color:var(--chalk-muted);
  line-height:1.45;
  font-size:15px;
  margin:0;
}