@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=Inter:wght@500;650;750;850&display=swap');

:root{
  --space:#07111f;
  --navy:#0c1d34;
  --navy2:#132946;

  --paper:#f4ecdc;
  --ink:#262a31;

  --orange:#ef7444;
  --cyan:#6bd7dc;

  --blue:#8ab9df;
  --green:#9bb774;
  --yellow:#ebb64b;

  --good:#8fc6a6;
  --bad:#ce7070;

  --white:#f7f6f1;
}


*{
  box-sizing:border-box;
}


html,
body{
  margin:0;
  min-height:100%;
  background:var(--space);
  color:var(--white);
  font-family:Inter,Arial,sans-serif;
}


body{
  overflow-x:hidden;

  background:
    radial-gradient(
      circle at 15% 8%,
      rgba(77,121,177,.16),
      transparent 28rem
    ),
    #07111f;
}


button{
  font:inherit;
}


.hidden{
  display:none!important;
}


.hidden-card{
  visibility:hidden!important;
  pointer-events:none!important;
}


/* =========================================================
   BACKGROUND
========================================================= */

.stars{
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.18;

  background-image:
    radial-gradient(
      circle,
      #fff 0 1px,
      transparent 1.5px
    );

  background-size:
    110px 110px;
}


.scanlines{
  position:fixed;
  inset:0;

  pointer-events:none;
  z-index:50;
  opacity:.035;

  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 3px,
      #fff 4px
    );
}


/* =========================================================
   TOP BAR
========================================================= */

.topbar{
  position:fixed;
  left:0;
  right:0;
  top:0;
  z-index:30;

  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;

  padding:
    12px 24px;

  background:
    rgba(5,13,27,.93);

  border-bottom:
    1px solid rgba(255,255,255,.14);

  backdrop-filter:
    blur(10px);
}


.brand,
.progress-wrap{
  font:
    600 .68rem
    "IBM Plex Mono",
    monospace;

  letter-spacing:
    .14em;
}


.progress-wrap{
  display:flex;
  align-items:center;
  gap:10px;

  color:#c5d4e8;
}


.progress{
  width:170px;
  height:8px;

  border:
    1px solid rgba(255,255,255,.32);

  padding:1px;
}


.progress div{
  height:100%;
  width:0;

  background:
    var(--cyan);

  transition:
    width .35s ease;
}


/* =========================================================
   SCREENS
========================================================= */

.screen{
  display:none;

  min-height:
    100vh;

  padding:
    76px
    clamp(14px,3vw,44px)
    28px;

  align-items:center;
  justify-content:center;
}


.screen.active{
  display:flex;

  animation:
    screenIn .35s ease both;
}


.activity-screen{
  align-items:flex-start;
}


@keyframes screenIn{
  from{
    opacity:0;
    transform:
      translateY(8px);
  }

  to{
    opacity:1;
    transform:none;
  }
}


.shell{
  width:
    min(1380px,100%);

  border:
    1px solid rgba(255,255,255,.18);

  background:
    linear-gradient(
      145deg,
      rgba(18,42,71,.97),
      rgba(7,20,39,.99)
    );

  box-shadow:
    0 28px 80px
    rgba(0,0,0,.38);
}


/* =========================================================
   TYPE
========================================================= */

.eyebrow{
  font:
    600 .7rem/1.4
    "IBM Plex Mono",
    monospace;

  letter-spacing:
    .18em;

  color:#a8c8ee;
}


.eyebrow.dark{
  color:#777269;
}


h1,
h2,
h3{
  margin:
    .25em 0 .55em;

  line-height:1.05;
}


h1{
  font-size:
    clamp(
      2.7rem,
      7vw,
      5.8rem
    );

  letter-spacing:
    -.055em;
}


h2{
  font-size:
    clamp(
      2rem,
      4.2vw,
      3.8rem
    );

  letter-spacing:
    -.04em;
}


h3{
  font-size:
    clamp(
      1.2rem,
      2vw,
      1.8rem
    );
}


.mono{
  font-family:
    "IBM Plex Mono",
    monospace;

  color:#c7d3e4;
}


/* =========================================================
   BUTTONS
========================================================= */

.button,
.check-button,
.back-button{
  border:0;
  cursor:pointer;

  font:
    700 .76rem
    "IBM Plex Mono",
    monospace;

  letter-spacing:
    .06em;

  transition:
    .18s ease;
}


.button:hover:not(:disabled),
.check-button:hover:not(:disabled),
.back-button:hover{
  transform:
    translateY(-2px);
}


.button:disabled,
.check-button:disabled{
  opacity:.35;
  cursor:not-allowed;
}


.button{
  padding:
    14px 21px;
}


.button.primary{
  background:
    var(--orange);

  color:white;
}


.button.ink{
  background:
    var(--navy);

  color:white;
}


.button.ghost{
  background:
    transparent;

  color:
    var(--navy);

  border:
    1px solid
    rgba(16,29,53,.35);
}


/* =========================================================
   BOOT
========================================================= */

.terminal{
  width:min(1180px,100%);
  min-height:650px;
  padding:0;
  position:relative;
  overflow:hidden;

  display:grid;
  grid-template-columns:minmax(235px,.38fr) minmax(0,1fr);
  align-items:center;

  background:
    linear-gradient(
      145deg,
      rgba(18,42,71,.98),
      rgba(7,20,39,.99)
    );
}


.terminal::before{
  content:"";
  position:absolute;
  inset:18px;
  border:1px solid rgba(255,255,255,.12);
  pointer-events:none;
}


.terminal::after{
  content:"";
  position:absolute;
  inset:44px 38px 44px 20%;
  border:
    1px solid
    rgba(138,185,223,.14);
  pointer-events:none;
}


.boot-character{
  position:relative;
  align-self:stretch;
  z-index:2;

  display:flex;
  align-items:flex-end;
  justify-content:center;

  min-height:650px;
  padding:34px 0 0 18px;
}


.boot-character::after{
  content:"";
  position:absolute;
  left:22%;
  right:-24%;
  bottom:26px;
  height:70px;

  background:
    radial-gradient(
      ellipse at center,
      rgba(0,0,0,.34),
      transparent 68%
    );

  filter:blur(8px);
  z-index:-1;
}


.boot-character img{
  width:min(330px,112%);
  max-height:620px;
  object-fit:contain;
  object-position:center bottom;

  filter:
    drop-shadow(
      0 22px 22px
      rgba(0,0,0,.34)
    );
}


.boot-copy{
  position:relative;
  z-index:3;

  padding:
    clamp(42px,7vw,84px)
    clamp(30px,6vw,80px)
    clamp(42px,7vw,84px)
    clamp(20px,3vw,42px);

  text-align:center;
}


.boot-copy h1{
  max-width:820px;
  margin-left:auto;
  margin-right:auto;
}


.signal-row{
  display:grid;

  grid-template-columns:
    auto 1fr auto;

  gap:14px;
  align-items:center;

  margin:
    40px 0 18px;

  font:
    600 .75rem
    "IBM Plex Mono",
    monospace;
}


.signal-track{
  height:14px;

  border:
    1px solid
    rgba(255,255,255,.35);

  padding:2px;
}


.signal-track div{
  height:100%;
  width:0;

  background:
    repeating-linear-gradient(
      90deg,
      var(--orange) 0 18px,
      transparent 18px 22px
    );
}


@media(max-width:820px){

  .terminal{
    grid-template-columns:1fr;
    min-height:unset;
  }


  .terminal::after{
    inset:32px;
  }


  .boot-character{
    min-height:280px;
    padding:28px 20px 0;
    align-items:center;
  }


  .boot-character img{
    width:min(230px,65vw);
    max-height:280px;
  }


  .boot-copy{
    padding:22px 24px 48px;
  }
}


/* =========================================================
   STORY
========================================================= */

.story-shell{
  display:grid;

  grid-template-columns:
    minmax(360px,1.05fr)
    minmax(420px,.95fr);

  gap:0;
  overflow:hidden;
}


.story-visual{
  min-height:620px;

  padding:26px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:
    radial-gradient(
      circle at center,
      rgba(107,215,220,.10),
      transparent 55%
    ),
    rgba(4,15,30,.35);
}


.story-visual img{
  width:100%;
  height:100%;

  max-height:
    590px;

  object-fit:
    contain;

  filter:
    drop-shadow(
      0 18px 18px
      rgba(0,0,0,.28)
    );
}


.story-visual.wide img{
  max-width:100%;
  max-height:560px;
}


.story-visual.close img{
  max-width:520px;
  max-height:540px;
}


.dialogue-panel{
  min-height:
    620px;

  padding:
    clamp(
      30px,
      5vw,
      58px
    );

  display:flex;
  flex-direction:column;
  justify-content:center;

  background:
    var(--paper);

  color:
    var(--ink);

  background-image:
    repeating-linear-gradient(
      0deg,
      transparent 0 28px,
      rgba(40,40,35,.035) 29px
    );
}


.speaker{
  font:
    700 .74rem
    "IBM Plex Mono",
    monospace;

  letter-spacing:
    .15em;

  color:#767168;
}


.dialogue-text{
  min-height:300px;

  font:
    500
    clamp(
      1rem,
      1.8vw,
      1.32rem
    )/1.7
    "IBM Plex Mono",
    monospace;

  white-space:
    pre-wrap;
}


.dialogue-panel .button{
  align-self:flex-start;
}


/* =========================================================
   TEACHING
========================================================= */

.lesson-shell,
.hub,
.game-shell{
  padding:
    clamp(
      20px,
      3.4vw,
      42px
    );
}


.section-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;

  gap:18px;

  padding-bottom:
    18px;

  border-bottom:
    1px solid
    rgba(255,255,255,.17);
}


.section-header h2{
  margin-bottom:0;
}


.counter,
.scorebox{
  padding:
    11px 14px;

  border:
    1px solid
    rgba(255,255,255,.22);

  font:
    600 .7rem
    "IBM Plex Mono",
    monospace;
}


.teaching-stage{
  position:relative;
  margin-top:28px;
  min-height:575px;
  padding-bottom:88px;
}


.research-card{
  min-height:500px;
  display:grid;
  grid-template-columns:minmax(300px,.9fr) minmax(380px,1.1fr);

  overflow:hidden;

  background:
    var(--paper);

  color:
    var(--ink);

  border:
    1px solid
    rgba(255,255,255,.16);

  box-shadow:
    0 28px 60px
    rgba(0,0,0,.25);

  background-image:
    repeating-linear-gradient(
      0deg,
      transparent 0 29px,
      rgba(40,40,35,.025) 30px
    );
}


.research-card-visual{
  min-height:500px;
  padding:
    clamp(22px,4vw,48px);

  display:grid;
  place-items:center;

  border-right:
    1px solid
    rgba(38,42,49,.12);

  background:
    rgba(255,255,255,.20);
}


.research-card-visual img{
  width:100%;
  max-width:500px;
  max-height:405px;

  object-fit:contain;

  filter:
    drop-shadow(
      0 10px 18px
      rgba(20,20,16,.08)
    );
}


.research-card-copy{
  padding:
    clamp(32px,5vw,68px);

  display:flex;
  flex-direction:column;
  justify-content:center;
}


.research-card-copy h3{
  margin-top:.22em;

  font-size:
    clamp(2rem,4vw,4rem);

  letter-spacing:
    -.045em;
}


.skill-meaning{
  max-width:760px;

  margin:
    6px 0 24px;

  font-size:
    clamp(1.05rem,1.8vw,1.38rem);

  line-height:1.58;
}


.why-box{
  max-width:760px;

  padding:
    16px 20px;

  border-left:
    4px solid
    var(--orange);

  background:
    rgba(239,116,68,.08);
}


.why-box strong{
  font:
    700 .72rem
    "IBM Plex Mono",
    monospace;

  letter-spacing:.08em;
}


.why-box p{
  margin:
    8px 0 0;

  line-height:1.55;
}


.glorb-annotation{
  position:absolute;
  right:
    clamp(18px,4vw,62px);
  bottom:0;
  z-index:8;

  width:
    min(690px,62%);

  display:grid;
  grid-template-columns:
    155px minmax(0,1fr);

  gap:0;
  align-items:end;

  opacity:0;
  transform:
    translateY(28px)
    rotate(-.5deg)
    scale(.96);

  pointer-events:none;

  transition:
    opacity .38s ease,
    transform .5s
    cubic-bezier(.2,.8,.2,1);
}


.glorb-annotation.is-visible{
  opacity:1;

  transform:
    translateY(0)
    rotate(-.5deg)
    scale(1);
}


.glorb-annotation img{
  width:170px;
  max-height:210px;

  object-fit:contain;
  object-position:center bottom;

  transform:
    translate(18px,8px);

  filter:
    drop-shadow(
      0 13px 16px
      rgba(0,0,0,.22)
    );
}


.glorb-scribble{
  position:relative;

  min-height:122px;

  padding:
    18px 24px 19px 54px;

  color:
    #272b31;

  background:
    #e8ddc5;

  border:
    1px solid
    rgba(71,65,55,.22);

  box-shadow:
    0 12px 30px
    rgba(0,0,0,.18);

  transform:
    rotate(-.8deg);
}


.glorb-scribble::before{
  content:"↳";

  position:absolute;
  left:18px;
  top:39px;

  color:
    var(--orange);

  font:
    700 1.65rem
    "IBM Plex Mono",
    monospace;
}


.glorb-scribble::after{
  content:"";

  position:absolute;
  left:52px;
  right:22px;
  bottom:13px;

  height:2px;

  background:
    linear-gradient(
      90deg,
      rgba(239,116,68,.48),
      transparent 88%
    );

  transform:
    rotate(-.4deg);
}


.glorb-scribble span{
  display:block;

  margin-bottom:8px;

  color:#81776b;

  font:
    700 .64rem
    "IBM Plex Mono",
    monospace;

  letter-spacing:.13em;
}


.glorb-scribble p{
  margin:0;

  font:
    600
    clamp(.92rem,1.45vw,1.12rem)/1.45
    "Bradley Hand",
    "Comic Sans MS",
    "Segoe Print",
    cursive;

  letter-spacing:.01em;
}


.glorb-scribble p::after{
  content:"|";
  display:inline-block;
  margin-left:2px;
  color:var(--orange);

  animation:
    noteCursor .7s
    steps(1)
    infinite;
}


.glorb-annotation.note-complete
.glorb-scribble p::after{
  display:none;
}


@keyframes noteCursor{
  0%,48%{opacity:1;}
  49%,100%{opacity:0;}
}


.teaching-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:20px;

  margin-top:14px;
}


.teaching-hint{
  margin:0;
  max-width:620px;

  font-size:.74rem;
  line-height:1.55;
}


.button-row{
  display:flex;
  justify-content:flex-end;

  gap:12px;
}


@media(max-width:930px){

  .teaching-stage{
    padding-bottom:130px;
  }


  .research-card{
    grid-template-columns:1fr;
  }


  .research-card-visual{
    min-height:330px;
    border-right:0;
    border-bottom:
      1px solid
      rgba(38,42,49,.12);
  }


  .glorb-annotation{
    width:min(720px,94%);
    right:3%;
  }
}


@media(max-width:620px){

  .teaching-stage{
    padding-bottom:198px;
  }


  .research-card-copy{
    padding:28px 22px 56px;
  }


  .glorb-annotation{
    grid-template-columns:88px 1fr;
    width:96%;
    right:2%;
  }


  .glorb-annotation img{
    width:105px;
    max-height:145px;
    transform:
      translate(10px,6px);
  }


  .glorb-scribble{
    padding:
      14px 16px
      16px 36px;

    min-height:116px;
  }


  .glorb-scribble::before{
    left:10px;
    top:35px;
  }


  .teaching-footer{
    align-items:stretch;
    flex-direction:column;
  }


  .teaching-footer .button-row{
    justify-content:space-between;
  }
}


/* =========================================================
   MISSION HUB
========================================================= */

.objective{
  margin:
    22px 0;

  padding:18px;

  background:
    var(--paper);

  color:
    var(--ink);
}


.objective strong{
  font:
    700 .72rem
    "IBM Plex Mono",
    monospace;
}


.mission-grid{
  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:14px;
}


.mission-card{
  min-height:230px;

  padding:22px;

  display:flex;
  flex-direction:column;

  border:
    1px solid
    rgba(255,255,255,.2);

  background:
    rgba(255,255,255,.04);

  color:white;

  text-align:left;

  cursor:pointer;
}


.mission-card span{
  font:
    600 2rem
    "IBM Plex Mono",
    monospace;

  color:
    var(--orange);
}


.mission-card strong{
  margin-top:auto;

  font-size:
    1.3rem;
}


.mission-card em{
  margin-top:11px;

  font:
    500 .68rem
    "IBM Plex Mono",
    monospace;

  color:
    #bac8da;
}


.mission-card.locked{
  opacity:.35;
  cursor:not-allowed;
}


.mission-card.complete{
  border-color:
    var(--good);

  background:
    rgba(143,198,166,.12);
}


/* =========================================================
   ACTIVITY COMMON
========================================================= */

.activity-titlebar{
  display:flex;
  align-items:center;

  gap:10px;

  margin-bottom:14px;

  font:
    700 .72rem
    "IBM Plex Mono",
    monospace;

  letter-spacing:
    .06em;

  color:
    #b8d7fb;
}


.activity-dot{
  width:7px;
  height:7px;

  border-radius:50%;

  background:
    #9ad6ff;
}


.activity-rule{
  height:1px;
  flex:1;

  background:
    rgba(255,255,255,.15);
}


.activity-intro{
  display:grid;

  grid-template-columns:
    190px 1fr;

  gap:18px;
  align-items:center;

  margin-bottom:16px;

  padding:
    14px 18px;

  border:
    1px solid
    rgba(255,255,255,.2);

  border-radius:14px;

  background:
    rgba(2,14,29,.42);
}


.activity-intro img{
  width:100%;
  height:150px;

  object-fit:contain;
}


.activity-intro p{
  margin:0;

  font:
    500
    clamp(
      .86rem,
      1.5vw,
      1.1rem
    )/1.55
    "IBM Plex Mono",
    monospace;

  color:
    #f2f3f4;
}


.activity-intro p strong{
  font-size:1.15em;

  color:
    #a8c8ee;
}


.looks-word{
  color:#86c5ff;
}


.sounds-word{
  color:#b5cd75;
}


.feels-word{
  color:#ffc249;
}


.activity-footer{
  margin-top:15px;

  display:grid;

  grid-template-columns:
    auto 1fr auto;

  gap:14px;
  align-items:center;
}


.back-button,
.check-button{
  padding:
    12px 16px;

  background:
    transparent;

  color:
    #b8d7fb;

  border:
    1px solid
    rgba(255,255,255,.22);
}


.check-button{
  color:
    #c5d96d;

  border-color:
    rgba(197,217,109,.5);
}


.activity-feedback{
  min-height:44px;

  padding:
    11px 14px;

  border-left:
    3px solid
    var(--orange);

  background:
    rgba(0,0,0,.20);

  font:
    500 .7rem/1.4
    "IBM Plex Mono",
    monospace;

  color:
    #d4deea;
}


/* =========================================================
   SORT ACTIVITY
========================================================= */

.listening-sort{
  display:grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    );

  gap:12px;
}


.listening-category{
  min-height:370px;

  padding:10px;

  border-radius:16px;

  display:flex;
  flex-direction:column;

  overflow:hidden;

  background:
    var(--paper);
}


.listening-category.looks{
  border:
    4px solid
    var(--blue);
}


.listening-category.sounds{
  border:
    4px solid
    var(--green);
}


.listening-category.feels{
  border:
    4px solid
    var(--yellow);
}


.listening-category > img{
  width:100%;
  height:185px;

  object-fit:contain;
}


.drop-items{
  flex:1;

  min-height:155px;

  margin-top:3px;
  padding:8px;

  display:flex;
  flex-wrap:wrap;
  gap:6px;

  align-content:flex-start;

  border:
    2px dashed;
}


.looks .drop-items{
  border-color:
    var(--blue);
}


.sounds .drop-items{
  border-color:
    var(--green);
}


.feels .drop-items{
  border-color:
    var(--yellow);
}


.drop-placeholder{
  margin:auto;

  font:
    600 .65rem
    "IBM Plex Mono",
    monospace;

  letter-spacing:.05em;

  color:#777;
}


.listening-category.dragover{
  box-shadow:
    0 0 0 3px
    rgba(107,215,220,.28);
}


.bank-heading{
  margin:
    13px 0 8px;

  font:
    600 .68rem
    "IBM Plex Mono",
    monospace;

  letter-spacing:.04em;

  color:#b8d7fb;
}


.visual-card-bank{
  display:grid;

  grid-template-columns:
    repeat(
      6,
      minmax(0,1fr)
    );

  gap:8px;
}


.sort-card{
  min-height:135px;

  padding:7px;

  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:center;

  gap:5px;

  border:
    2px solid
    #d4c3a3;

  border-radius:8px;

  background:
    var(--paper);

  color:
    var(--ink);

  text-align:center;

  cursor:grab;
}


.sort-card img{
  width:100%;
  height:88px;

  object-fit:contain;
}


.sort-card span{
  font:
    700 .57rem/1.18
    "IBM Plex Mono",
    monospace;

  text-transform:
    uppercase;
}


.sort-card.selected{
  outline:
    3px solid
    var(--orange);
}


.placed-sort{
  width:
    calc(50% - 3px);

  padding:4px;

  border:
    1px solid
    rgba(38,42,49,.22);

  border-radius:5px;

  background:
    #fffdf8;

  color:
    var(--ink);

  display:flex;
  flex-direction:column;
  align-items:center;

  text-align:center;
}


.placed-sort img{
  width:100%;
  height:48px;

  object-fit:contain;
}


.placed-sort span{
  font:
    700 .45rem/1.12
    "IBM Plex Mono",
    monospace;

  text-transform:
    uppercase;
}


.placed-sort.correct{
  outline:
    3px solid
    var(--good);
}


.placed-sort.incorrect{
  outline:
    3px solid
    var(--bad);
}


/* =========================================================
   BODY CALIBRATION
========================================================= */

.body-layout{
  display:grid;

  grid-template-columns:
    minmax(520px,1.25fr)
    minmax(320px,.75fr);

  gap:18px;

  align-items:start;
}


.body-map{
  position:relative;

  width:100%;

  aspect-ratio:
    900 / 1600;

  min-height:0;

  border:
    1px solid
    rgba(255,255,255,.16);

  background:
    rgba(0,0,0,.12);
}


.body-map > img{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  object-fit:contain;
}


/*
  IMPORTANT:
  These coordinates are measured directly from
  body-calibration-upright.webp (900 × 1600).
  Each interactive field sits INSIDE the printed empty box.
*/

.body-zone{
  position:absolute;
  z-index:4;

  padding:
    4px 6px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:
    1px dashed
    rgba(184,215,251,.62);

  background:
    rgba(5,20,38,.78);

  color:white;

  cursor:pointer;
}


.body-zone > span{
  position:absolute;

  left:2px;
  top:-20px;

  color:#b8d7fb;

  font:
    700 .58rem
    "IBM Plex Mono",
    monospace;

  letter-spacing:.04em;
}


.body-zone small{
  display:block;
  width:100%;

  font:
    600
    clamp(
      7px,
      .63vw,
      11px
    )/1.2
    "IBM Plex Mono",
    monospace;

  color:white;
}


.body-zone.mouth small{
  font-size:
    clamp(
      6px,
      .52vw,
      9.5px
    );
}


.body-zone.dragover{
  outline:
    2px solid
    var(--cyan);
}


.body-zone.filled{
  border-style:solid;

  border-color:
    #a9cde8;
}


.body-zone.correct{
  outline:
    3px solid
    var(--good);

  background:
    rgba(17,54,52,.88);
}


.body-zone.incorrect{
  outline:
    3px solid
    var(--bad);
}


/* HEAD printed box */
.body-zone.head{
  left:20.0%;
  top:19.25%;

  width:21.4%;
  height:5.95%;
}


/* EYES printed box */
.body-zone.eyes{
  left:7.1%;
  top:27.75%;

  width:22.6%;
  height:5.25%;
}


/* EARS printed box */
.body-zone.ears{
  left:77.65%;
  top:22.88%;

  width:18.2%;
  height:4.95%;
}


/* MOUTH printed box */
.body-zone.mouth{
  left:73.35%;
  top:35.3%;

  width:22.55%;
  height:5.05%;
}


/* BODY printed box */
.body-zone.body{
  left:82.3%;
  top:42.65%;

  width:13.45%;
  height:5.05%;
}


/* HANDS printed box */
.body-zone.hands{
  left:73.25%;
  top:52.63%;

  width:18.05%;
  height:5.0%;
}


/* FEET printed box */
.body-zone.feet{
  left:7.1%;
  top:72.25%;

  width:27.0%;
  height:5.05%;
}


.body-bank{
  padding:18px;

  border:
    1px solid
    rgba(255,255,255,.16);

  background:
    rgba(0,0,0,.14);
}


.body-bank h3{
  margin:
    0 0 8px;

  font:
    700 .78rem
    "IBM Plex Mono",
    monospace;

  color:#a8c8ee;
}


.body-bank p{
  color:#bdc8d7;

  font:
    400 .68rem/1.5
    "IBM Plex Mono",
    monospace;
}


#bodyCards{
  display:grid;

  gap:9px;

  margin-top:12px;
}


.body-card{
  width:100%;
  min-height:58px;

  padding:
    11px 13px;

  border:
    2px solid
    #d5c7ae;

  border-radius:8px;

  background:
    var(--paper);

  color:
    var(--ink);

  cursor:grab;

  text-align:left;

  font:
    600 .67rem/1.38
    "IBM Plex Mono",
    monospace;
}


.body-card.selected{
  outline:
    3px solid
    var(--orange);
}


/* =========================================================
   FINAL ACTIVITY
========================================================= */

.apply-scenario{
  display:grid;

  grid-template-columns:
    minmax(240px,.55fr)
    minmax(360px,1fr);

  gap:26px;
  align-items:center;

  margin:
    12px 0 24px;

  padding:
    clamp(
      20px,
      3vw,
      34px
    );

  border:
    1px solid
    rgba(255,255,255,.2);

  background:
    var(--paper);

  color:
    var(--ink);
}


.apply-scenario img{
  width:100%;
  max-height:330px;

  object-fit:contain;
}


.apply-scenario > div > p:last-child{
  font:
    500
    clamp(
      .9rem,
      1.5vw,
      1.1rem
    )/1.65
    "IBM Plex Mono",
    monospace;

  white-space:pre-line;
}


.instruction{
  color:#f3f5f7;
}


.choice-grid{
  display:grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );

  gap:12px;
}


.choice{
  min-height:100px;

  padding:
    18px;

  border:
    1px solid
    rgba(255,255,255,.22);

  background:
    rgba(255,255,255,.035);

  color:white;

  text-align:left;

  cursor:pointer;
}


.choice.selected{
  outline:
    3px solid
    var(--orange);
}


.choice.correct{
  outline:
    3px solid
    var(--good);

  background:
    rgba(143,198,166,.13);
}


.choice.incorrect{
  outline:
    3px solid
    var(--bad);

  background:
    rgba(206,112,112,.13);
}


.reply-stage{
  margin-top:28px;

  padding-top:20px;

  border-top:
    1px solid
    rgba(255,255,255,.16);
}


.reply-stage .check-button{
  margin-top:14px;
}


/* =========================================================
   FINAL
========================================================= */

.final-paper p{
  line-height:1.7;
}


.final-message{
  margin:
    16px 0 24px;

  padding:
    16px;

  border-left:
    4px solid
    var(--orange);

  background:
    rgba(239,116,68,.08);

  font-weight:650;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1050px){

  .visual-card-bank{
    grid-template-columns:
      repeat(
        4,
        minmax(0,1fr)
      );
  }


  .body-layout{
    grid-template-columns:
      1fr;
  }


  .body-map{
    max-width:760px;
    margin-inline:auto;
  }
}


@media(max-width:900px){

  .story-shell{
    grid-template-columns:
      1fr;
  }


  .story-visual,
  .dialogue-panel{
    min-height:420px;
  }


  .story-visual{
    max-height:520px;
  }


  .teaching-layout{
    grid-template-columns:
      1fr;
  }


  .mission-grid{
    grid-template-columns:
      1fr;
  }


  .listening-sort{
    grid-template-columns:
      1fr;
  }


  .listening-category{
    min-height:340px;
  }


  .activity-intro{
    grid-template-columns:
      140px 1fr;
  }


  .activity-footer{
    grid-template-columns:
      1fr;
  }


  .back-button,
  .check-button{
    width:100%;
  }


  .apply-scenario{
    grid-template-columns:
      1fr;
  }


  .apply-scenario img{
    max-height:270px;
  }
}


@media(max-width:680px){

  .topbar{
    padding:
      10px 12px;
  }


  .brand{
    font-size:.52rem;
  }


  .progress-wrap > span,
  .progress-wrap strong{
    display:none;
  }


  .progress{
    width:100px;
  }


  .screen{
    padding:
      66px 10px 18px;
  }


  .lesson-shell,
  .hub,
  .game-shell{
    padding:14px;
  }


  .section-header{
    flex-direction:column;
  }


  .activity-intro{
    grid-template-columns:
      1fr;
  }


  .activity-intro img{
    height:120px;
  }


  .visual-card-bank{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }


  .choice-grid{
    grid-template-columns:
      1fr;
  }


  .body-zone > span{
    top:-15px;
    font-size:.45rem;
  }


  .body-zone small{
    font-size:
      clamp(
        5px,
        1.45vw,
        8px
      );
  }


  .body-zone.mouth small{
    font-size:
      clamp(
        4.6px,
        1.22vw,
        7px
      );
  }
}


/* =========================================================
   READ ALOUD
========================================================= */

.read-aloud-btn{
  position:fixed;
  top:54px;
  right:18px;
  z-index:1000;

  display:flex;
  align-items:center;
  gap:8px;

  padding:9px 13px;

  border:
    1px solid
    rgba(184,215,251,.45);

  border-radius:9px;

  background:
    rgba(7,17,31,.94);

  color:
    #dcecff;

  box-shadow:
    0 8px 24px
    rgba(0,0,0,.28);

  backdrop-filter:
    blur(8px);

  cursor:pointer;

  font:
    700 .66rem
    "IBM Plex Mono",
    monospace;

  letter-spacing:
    .06em;

  transition:
    transform .16s ease,
    background .16s ease,
    color .16s ease,
    border-color .16s ease;
}


.read-aloud-btn:hover{
  transform:
    translateY(-2px);

  border-color:
    var(--cyan);

  background:
    rgba(15,38,66,.98);
}


.read-aloud-btn:focus-visible{
  outline:
    3px solid
    var(--cyan);

  outline-offset:
    3px;
}


.read-aloud-btn.speaking{
  background:
    var(--paper);

  color:
    var(--navy);

  border-color:
    var(--paper);
}


.speaker-svg{
  width:18px;
  height:18px;

  flex:0 0 auto;
}


@media(max-width:680px){

  .read-aloud-btn{
    top:50px;
    right:10px;

    width:42px;
    height:42px;

    padding:0;

    justify-content:center;
  }


  .read-label{
    display:none;
  }


  .speaker-svg{
    width:20px;
    height:20px;
  }
}


/* =========================================================
   V9 — NEW VISUAL ASSET TUNING
========================================================= */

.boot-character img{
  width:min(560px,145%);
  max-height:620px;
  object-fit:contain;
}

.category-header{
  min-height:150px;
  padding:20px 14px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:7px;
  border-radius:12px;
  background:rgba(255,255,255,.62);
  color:#252a30;
  text-align:center;
}

.category-header strong{
  font-size:clamp(1.15rem,2vw,1.55rem);
  letter-spacing:.04em;
}

.category-header span{
  max-width:230px;
  font:600 .77rem/1.45 "IBM Plex Mono", monospace;
  color:#686158;
}

.research-card-visual img{
  max-width:520px;
  max-height:390px;
}

.glorb-annotation{
  width:min(760px,68%);
}

.glorb-annotation img{
  width:240px;
  max-height:235px;
  object-fit:contain;
  object-position:center bottom;
}

.story-visual.wide img{
  max-height:610px;
}

.story-visual.close img{
  max-width:720px;
  max-height:570px;
}

.apply-scenario img{
  object-fit:contain;
}

@media(max-width:620px){
  .glorb-annotation{
    width:98%;
  }

  .glorb-annotation img{
    width:135px;
    max-height:150px;
  }

  .category-header{
    min-height:110px;
  }
}
/* =========================================================
   GLORB LISTENING MISSION — ADULT INFORMATION
========================================================= */

.topbar-right{
  display:flex;
  align-items:center;
  gap:18px;
}

.adult-info-trigger{
  border:1px solid rgba(255,255,255,.24);
  background:rgba(255,255,255,.04);
  color:#f7f6f1;
  padding:9px 13px;

  display:flex;
  align-items:center;
  gap:7px;

  cursor:pointer;

  font:
    700 .62rem
    "IBM Plex Mono",
    monospace;

  letter-spacing:.06em;
}

.adult-info-trigger:hover{
  background:rgba(255,255,255,.1);
}


/* MODAL */

.adult-info-modal{
  position:fixed;
  inset:0;
  z-index:9999;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:14px;
}

.adult-info-modal[hidden]{
  display:none !important;
}

.adult-info-backdrop{
  position:absolute;
  inset:0;

  background:rgba(4,10,18,.78);
  backdrop-filter:blur(4px);
}

.adult-info-panel{
  position:relative;
  z-index:2;

  width:min(1500px, 98vw);
  max-height:94vh;

  display:flex;
  flex-direction:column;

  overflow:hidden;

  border-radius:34px;

  background:#f4ecdc;
  color:#20242d;

  box-shadow:
    0 30px 100px
    rgba(0,0,0,.45);
}


/* HEADER */

.adult-info-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:24px;

  padding:
    28px
    clamp(24px,3vw,40px)
    24px;

  border-bottom:
    1px solid
    rgba(32,36,45,.15);
}

.adult-info-eyebrow{
  margin:0 0 8px;

  color:#777269;

  font:
    700 .72rem
    "IBM Plex Mono",
    monospace;

  letter-spacing:.16em;
}

.adult-info-header h2{
  margin:0;

  color:#20242d;

  font-family:
    Inter,
    Arial,
    sans-serif;

  font-size:
    clamp(2.5rem,5vw,4.8rem);

  letter-spacing:-.055em;
}

.adult-info-close{
  flex:0 0 auto;

  width:78px;
  height:78px;

  border:0;
  border-radius:50%;

  background:rgba(32,36,45,.045);

  color:#000;

  cursor:pointer;

  font-size:3.3rem;
  font-weight:800;
  line-height:1;
}


/* TABS */

.adult-info-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:12px;

  padding:
    20px
    clamp(18px,3vw,32px);

  border-bottom:
    1px solid
    rgba(32,36,45,.15);
}

.adult-info-tab{
  min-height:52px;

  padding:0 24px;

  border:
    1px solid
    #c8d0d9;

  border-radius:999px;

  background:#fff;
  color:#102039;

  cursor:pointer;

  font:
    750 1rem
    Inter,
    Arial,
    sans-serif;
}

.adult-info-tab.active{
  border-color:#082d4c;
  background:#082d4c;
  color:#fff;
}


/* SCROLL AREA */

.adult-info-content{
  overflow-y:auto;

  padding:
    28px
    clamp(18px,3vw,32px)
    34px;
}


/* PAGES */

.adult-info-page{
  display:none;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:20px;
}

.adult-info-page.active{
  display:grid;
}


/* CARDS */

.adult-card{
  min-width:0;

  padding:
    clamp(22px,2.5vw,30px);

  border:
    1px solid
    #c8d0d9;

  border-radius:26px;

  background:#fff;
}

.adult-card-wide{
  grid-column:1 / -1;
}

.adult-card h3{
  margin:0 0 12px;

  color:#20242d;

  font-family:
    Inter,
    Arial,
    sans-serif;

  font-size:
    clamp(1.3rem,2vw,1.75rem);

  letter-spacing:-.025em;
}

.adult-card p,
.adult-card li{
  color:#20242d;

  font-family:
    Inter,
    Arial,
    sans-serif;

  font-size:
    clamp(1rem,1.5vw,1.22rem);

  font-weight:500;
  line-height:1.52;
}

.adult-card p{
  margin:0;
}

.adult-card p + p{
  margin-top:12px;
}

.adult-learning-sequence{
  font-weight:850 !important;
  font-size:
    clamp(1.35rem,2.4vw,2rem) !important;
}


/* EVIDENCE */

.evidence-layout.active{
  grid-template-columns:
    minmax(0,.82fr)
    minmax(420px,1.18fr);
}

.adult-evidence-cards{
  display:grid;
  gap:16px;
}

.adult-reference-card ol{
  margin:0;
  padding-left:28px;

  display:grid;
  gap:15px;
}

.adult-reference-card li{
  font-size:
    clamp(.92rem,1.2vw,1.08rem);
}


/* IMPORTANT CARD */

.adult-important-card{
  border-left:
    6px solid
    #ef7444;

  background:#fff8ee;
}


/* LOCK BACKGROUND SCROLL */

body.adult-info-open{
  overflow:hidden;
}


/* TABLET */

@media (max-width:900px){

  .topbar-right{
    gap:8px;
  }

  .adult-info-trigger{
    padding:8px 10px;
  }

  .adult-info-trigger{
    font-size:0;
  }

  .adult-info-trigger span{
    font-size:1rem;
  }

  .adult-info-panel{
    width:100%;
    max-height:96vh;
    border-radius:24px;
  }

  .adult-info-header h2{
    font-size:
      clamp(2.2rem,9vw,3.4rem);
  }

  .adult-info-close{
    width:60px;
    height:60px;
    font-size:2.5rem;
  }

  .adult-info-tabs{
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom:14px;
  }

  .adult-info-tab{
    flex:0 0 auto;
    min-height:46px;
    padding:0 18px;
    font-size:.9rem;
  }

  .adult-info-page.active,
  .evidence-layout.active{
    grid-template-columns:1fr;
  }

  .adult-card-wide{
    grid-column:auto;
  }

}


/* MOBILE */

@media (max-width:520px){

  .adult-info-modal{
    padding:6px;
  }

  .adult-info-panel{
    max-height:98vh;
    border-radius:18px;
  }

  .adult-info-header{
    padding:22px 18px 18px;
  }

  .adult-info-eyebrow{
    font-size:.62rem;
  }

  .adult-info-header h2{
    font-size:2rem;
  }

  .adult-info-close{
    width:48px;
    height:48px;
    font-size:2rem;
  }

  .adult-info-content{
    padding:16px 12px 24px;
  }

  .adult-card{
    border-radius:18px;
    padding:20px 18px;
  }

}