:root{
  --paper:#f4f0e7;
  --paper2:#ebe4d6;
  --card:#fffdf8;
  --ink:#11110f;
  --muted:#625e55;
  --line:#171714;
  --lime:#d8ff35;
  --pink:#ff79a8;
  --violet:#7665ff;
  --cyan:#8eeaff;
  --orange:#ff9b42;
  --green:#c8f86a;
  --display:"Space Grotesk",Arial,sans-serif;
  --body:"Manrope",Arial,sans-serif;
  --mono:"DM Mono",monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper)!important;
  color:var(--ink)!important;
  font-family:var(--body);
  overflow-x:hidden;
}
body:before{
  content:"";
  position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
a{color:inherit}
button,input{font:inherit}

/* NAV */
.learnNav{
  position:sticky!important;top:14px!important;z-index:100!important;
  width:min(1380px,calc(100% - 56px))!important;
  min-height:68px!important;margin:14px auto 0!important;
  padding:8px 10px!important;
  display:grid!important;grid-template-columns:220px 1fr auto!important;
  align-items:center!important;gap:18px!important;
  background:rgba(255,253,248,.94)!important;
  border:2px solid var(--ink)!important;
  border-radius:0!important;
  box-shadow:7px 7px 0 var(--ink)!important;
  backdrop-filter:blur(12px)!important;
}
.learnNav .brand{
  display:flex!important;align-items:center!important;gap:10px!important;
  text-decoration:none!important;color:var(--ink)!important;
  font:800 12px var(--mono)!important;letter-spacing:.1em!important;
}
.learnNav .brand img{
  width:46px!important;height:46px!important;object-fit:contain!important;
  border-radius:0!important;filter:none!important;
}
.learnNav .brand span{color:var(--ink)!important}
.learnNav .links{display:flex!important;justify-content:center!important;gap:4px!important}
.learnNav .links a,.learnNav .back{
  border:1px solid transparent!important;
  background:transparent!important;color:var(--ink)!important;
  border-radius:0!important;padding:11px 12px!important;
  text-decoration:none!important;font:700 9px var(--mono)!important;
  letter-spacing:.1em!important;white-space:nowrap!important;
  transition:.16s ease!important;
}
.learnNav .links a:hover{
  background:var(--lime)!important;border-color:var(--ink)!important;
}
.learnNav .back{
  background:var(--lime)!important;
  border:2px solid var(--ink)!important;
  box-shadow:3px 3px 0 var(--ink)!important;
}
.learnNav .back:hover{transform:translate(2px,2px)!important;box-shadow:1px 1px 0 var(--ink)!important}
.mobileMenuBtn{
  display:none!important;background:var(--lime)!important;color:var(--ink)!important;
  border:2px solid var(--ink)!important;border-radius:0!important;
  padding:10px 12px!important;font-weight:900!important;
}
.mobilePanel{
  display:none;
  width:calc(100% - 56px);margin:0 auto;
  background:var(--card);border:2px solid var(--ink);border-top:0;
  box-shadow:7px 7px 0 var(--ink);
}
.mobilePanel a{display:block;padding:15px 18px;border-top:1px solid #aaa69c;font:800 10px var(--mono)}

/* COMMON */
.lessonHero,.lessonWrap,.schoolIndex,.footer{
  width:min(1320px,calc(100% - 56px));
  margin-left:auto;margin-right:auto;
}
.lessonHero{
  position:relative;
  margin-top:48px;
  padding:54px 0 58px;
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);
  gap:54px;align-items:end;
  border-bottom:2px solid var(--ink);
}
.lessonHero:before{
  content:"NEWBEE SCHOOL // FIELD MANUAL";
  position:absolute;left:0;top:0;
  color:var(--violet);font:800 10px/1 var(--mono);letter-spacing:.18em;
}
.lessonHero:after{
  content:"01";position:absolute;right:0;top:5px;
  color:#ded8ca;font:900 clamp(130px,18vw,260px)/.8 var(--mono);
  letter-spacing:-.08em;z-index:-1;
}
.eyebrow{
  font:800 10px/1.2 var(--mono)!important;
  letter-spacing:.16em!important;color:var(--violet)!important;
  margin-bottom:16px!important;
}
.lessonHero h1{
  margin:0!important;
  font:800 clamp(58px,8vw,126px)/.86 var(--display)!important;
  letter-spacing:-.07em!important;
  text-transform:uppercase;
}
.lessonHero h1 em{color:var(--violet)}
.lead{
  max-width:760px!important;
  margin:24px 0 0!important;
  color:var(--muted)!important;
  font-size:17px!important;line-height:1.7!important;
}
.lessonMeta{
  display:flex!important;flex-wrap:wrap;gap:8px!important;margin-top:26px!important;
}
.lessonMeta span{
  padding:9px 11px!important;
  border:1px solid var(--ink)!important;
  background:var(--card)!important;
  color:var(--ink)!important;
  font:700 9px var(--mono)!important;
  text-transform:uppercase;
}
.heroCard{
  min-height:250px;
  background:var(--lime)!important;
  border:2px solid var(--ink)!important;
  box-shadow:10px 10px 0 var(--ink)!important;
  padding:24px!important;
  display:flex!important;flex-direction:column!important;
  justify-content:space-between!important;
  color:var(--ink)!important;
}
.heroCard span{font:700 9px var(--mono)!important;letter-spacing:.12em!important}
.heroCard strong{
  display:block!important;
  font:900 clamp(90px,12vw,170px)/.8 var(--display)!important;
  letter-spacing:-.1em!important;
}

/* LESSON INDEX */
.schoolIndex{padding:62px 0 90px}
.schoolLead{
  display:grid;grid-template-columns:1fr 280px;gap:50px;
  padding-bottom:50px;border-bottom:2px solid var(--ink);
}
.schoolLead h1{
  margin:0;font:800 clamp(54px,8vw,116px)/.86 var(--display);
  letter-spacing:-.075em;text-transform:uppercase;
}
.schoolLead p{max-width:760px;color:var(--muted);font-size:17px;line-height:1.7}
.schoolStat{
  background:var(--violet);color:var(--white,#fffdf8);
  border:2px solid var(--ink);box-shadow:10px 10px 0 var(--ink);
  padding:24px;min-height:210px;
  display:flex;flex-direction:column;justify-content:space-between;
}
.schoolStat b{font:900 92px/.8 var(--display);letter-spacing:-.09em}
.schoolStat span{font:700 10px var(--mono);letter-spacing:.13em}
.schoolNote{
  margin:30px 0;padding:18px;
  border:2px solid var(--ink);background:var(--card);
  display:grid;grid-template-columns:250px 1fr;gap:20px;
}
.schoolNote b,.levelSectionHead span{font:800 10px var(--mono);letter-spacing:.13em}
.schoolNote span{color:var(--muted);line-height:1.6}
.levelSectionHead{
  display:flex;justify-content:space-between;align-items:end;
  gap:20px;margin:58px 0 18px;padding-bottom:12px;
  border-bottom:2px solid var(--ink);
}
.levelSectionHead h2{margin:0;font:800 34px var(--display);letter-spacing:-.04em}
.topicGrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.topic{
  min-height:145px;padding:20px;
  background:var(--card);border:2px solid var(--ink);
  box-shadow:6px 6px 0 var(--ink);
  display:grid;grid-template-columns:58px 1fr auto;gap:16px;align-items:start;
  transition:.15s ease;
}
.topic:hover{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--ink);background:var(--lime)}
.topic>span{font:900 26px var(--mono);color:var(--violet)}
.topic b{font:900 17px var(--display);letter-spacing:.02em}
.topic small{display:block;color:var(--muted);line-height:1.55;margin-top:7px}
.topic strong{font:800 9px var(--mono);white-space:nowrap}

/* LESSON CONTENT */
.lessonWrap{padding:42px 0 90px}
.toc{
  background:var(--ink);color:var(--card);
  border:2px solid var(--ink);padding:22px;
  box-shadow:8px 8px 0 var(--lime);
  margin-bottom:42px;
}
.toc>b{font:800 10px var(--mono);letter-spacing:.15em;color:var(--lime)}
.toc>div{display:grid;grid-template-columns:1fr 1fr;gap:7px 20px;margin-top:16px}
.toc a{color:var(--card);font-size:13px;padding:6px 0;border-bottom:1px solid #45443f}
.toc a:hover{color:var(--lime)}
.lessonGrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.lesson{
  height:100%;padding:28px;
  background:var(--card);border:2px solid var(--ink);
  box-shadow:6px 6px 0 var(--ink);
}
.lesson .num,.num{
  display:inline-block;font:800 9px var(--mono);letter-spacing:.14em;
  color:var(--violet);border-bottom:2px solid var(--lime);padding-bottom:5px;
}
.lesson h2{font:800 30px/1 var(--display);letter-spacing:-.045em;margin:18px 0 14px}
.lesson p{color:#4f4b43;line-height:1.72;font-size:15px}
.example{
  margin-top:20px;padding:15px;
  background:var(--cyan);border:1px solid var(--ink);
  color:var(--ink);font-size:13px;line-height:1.6;
}
.example b,.check b{display:block;font:800 9px var(--mono);letter-spacing:.12em;margin-bottom:7px}
.check{
  margin-top:10px;padding:15px;
  background:#f0eadc;border-left:5px solid var(--lime);
  font-size:13px;line-height:1.6;
}
.check b{color:var(--violet)}
.lessonGrid>div:nth-child(3n) .example{background:var(--pink)}
.lessonGrid>div:nth-child(4n) .example{background:var(--orange)}

/* TABLE / CARDS / OTHER LESSON COMPONENTS */
.lessonWrap .section,.lessonWrap section{margin-top:34px}
.lessonWrap h2{letter-spacing:-.04em}
.lessonWrap h3{font:800 24px var(--display);letter-spacing:-.03em}
.lessonWrap p{line-height:1.7}
.lessonWrap ul{line-height:1.8}
.ruleGrid,.cardGrid,.featureGrid,.scamGrid,.safetyGrid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
}
.ruleGrid article,.card,.feature,.scamLab,.safetyCard,.doorCard,.allocationCard,.tokenIdentity,.tokenPromise{
  background:var(--card)!important;color:var(--ink)!important;
  border:2px solid var(--ink)!important;
  box-shadow:6px 6px 0 var(--ink)!important;
  padding:22px!important;
}
.ruleGrid article h3,.card h3,.feature h3{margin:10px 0}
.machineRail{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}
.machineRail button{
  background:var(--card);color:var(--ink);border:2px solid var(--ink);
  padding:10px 14px;font:800 10px var(--mono);cursor:pointer;
}
.machineRail button.active,.machineRail button:hover{background:var(--lime)}
.quiz{background:var(--card);border:2px solid var(--ink);padding:24px;box-shadow:7px 7px 0 var(--violet)}
.quiz button{border:2px solid var(--ink);background:var(--paper2);padding:12px;margin:6px;cursor:pointer;font-weight:800}
.quiz button:hover{background:var(--lime)}
.quiz .good{color:#19723c;font-weight:900}.quiz .bad{color:#c03a55;font-weight:900}

/* GLOSSARY / ATLAS */
.glossaryAtlas{padding-top:42px}
.atlasToolbar{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;margin-bottom:14px}
.atlasSearch{
  display:flex;align-items:center;gap:12px;
  border:2px solid var(--ink);background:var(--card);
  padding:14px 16px;box-shadow:5px 5px 0 var(--ink);
}
.atlasSearch span{font:900 22px var(--mono)}
.atlasSearch input{border:0;outline:0;background:transparent;width:100%;font-size:15px;color:var(--ink)}
.atlasCount{font:800 10px var(--mono);letter-spacing:.12em}
.atlasFilters{display:flex;gap:7px;flex-wrap:wrap;margin:14px 0 26px}
.atlasFilters button{
  border:1px solid var(--ink);background:var(--card);color:var(--ink);
  padding:9px 12px;font:800 9px var(--mono);cursor:pointer;
}
.atlasFilters button.active,.atlasFilters button:hover{background:var(--lime);border-width:2px}
.atlasGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.atlasCard{
  min-height:220px;padding:20px;background:var(--card);
  border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink);
}
.atlasCard small{font:800 8px var(--mono);letter-spacing:.12em;color:var(--violet)}
.atlasCard h3{font:800 25px var(--display);margin:16px 0 9px;letter-spacing:-.04em}
.atlasCard p{color:var(--muted);font-size:13px;line-height:1.65}
.atlasTag{
  display:inline-block;margin-top:10px;padding:6px 8px;
  background:var(--lime);border:1px solid var(--ink);
  font:800 8px var(--mono);
}
.atlasEmpty{padding:40px;border:2px solid var(--ink);background:var(--card);font-weight:800}

/* FOOTER */
.footer{
  border-top:2px solid var(--ink);
  padding:28px 0 50px;display:flex;justify-content:space-between;
  gap:20px;color:var(--muted);font:700 9px var(--mono);letter-spacing:.08em;
}

/* responsive */
@media(max-width:900px){
  .learnNav{width:calc(100% - 28px)!important;grid-template-columns:1fr auto!important}
  .learnNav .links,.learnNav .back{display:none!important}
  .mobileMenuBtn{display:block!important}
  .mobilePanel.open{display:block}
  .mobilePanel{width:calc(100% - 28px)}
  .lessonHero{width:calc(100% - 28px);grid-template-columns:1fr;gap:30px;padding-top:45px}
  .lessonWrap,.schoolIndex,.footer{width:calc(100% - 28px)}
  .schoolLead{grid-template-columns:1fr}
  .schoolStat{min-height:170px}
  .topicGrid,.lessonGrid,.atlasGrid{grid-template-columns:1fr}
  .toc>div{grid-template-columns:1fr}
  .ruleGrid,.cardGrid,.featureGrid,.scamGrid,.safetyGrid{grid-template-columns:1fr 1fr}
  .schoolNote{grid-template-columns:1fr}
}
@media(max-width:560px){
  .lessonHero h1{font-size:55px!important}
  .lead{font-size:15px!important}
  .heroCard{min-height:190px}
  .heroCard strong{font-size:90px!important}
  .topic{grid-template-columns:45px 1fr}
  .topic strong{display:none}
  .ruleGrid,.cardGrid,.featureGrid,.scamGrid,.safetyGrid{grid-template-columns:1fr}
  .footer{display:block}.footer span{display:block;margin:8px 0}
}