:root { --ink:#17221d; --paper:#fffdf7; --cream:#f5efe0; --lime:#d6f53c; --orange:#ff6e3b; --aqua:#a8e2d5; --rule:#d9d3c6; --mono:"DM Mono", monospace; --sans:"Nunito Sans", sans-serif; --serif:Fraunces, Georgia, serif; }
.hero-feature .feature-visual { position:absolute; inset:0; display:block; overflow:hidden; }
.hero-feature .feature-visual > img,.hero-feature .feature-preview { width:100%; height:100%; min-height:500px; display:block; object-fit:cover; }
.hero-feature .feature-preview { position:absolute; inset:0; opacity:0; transition:opacity .4s ease; }
.hero-feature:hover .feature-visual > img,.hero-feature:focus-visible .feature-visual > img { opacity:0; }
.hero-feature:hover .feature-preview,.hero-feature:focus-visible .feature-preview { opacity:.84; }
.hero-feature.auto-preview .feature-visual > img { opacity:0; }
.hero-feature.auto-preview .feature-preview { opacity:.84; }
.hero-feature.use-video-frame .feature-visual > img { opacity:0; }
.hero-feature.use-video-frame .feature-preview { opacity:.84; }
.hero-feature .feature-copy { z-index:1; }
.card-visual { position:relative; display:block; overflow:hidden; }
.home-story-card .card-visual { height:150px; }
.library-card .card-visual { height:190px; }
.home-story-card .card-visual > img,.library-card .card-visual > img,.card-visual .card-preview { width:100%; height:100%; display:block; object-fit:cover; }
.card-visual .card-preview { position:absolute; inset:0; opacity:0; transition:opacity .3s ease; }
.card-visual .card-embed-preview { position:absolute; inset:0; width:100%; height:100%; border:0; opacity:0; pointer-events:none; transition:opacity .3s ease; }
.card-visual .card-gif-preview { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; pointer-events:none; transition:opacity .3s ease; }
.media-badge { position:absolute; top:.7rem; right:.7rem; z-index:2; padding:.34rem .48rem; background:#d8fa31; color:#13231f; font-family:var(--mono); font-size:.62rem; font-weight:800; letter-spacing:.05em; line-height:1; text-transform:uppercase; box-shadow:3px 3px 0 #13231f; }
.home-story-card:hover .card-preview,.home-story-card:focus-visible .card-preview,.library-card:hover .card-preview,.library-card:focus-visible .card-preview { opacity:1; }
.home-story-card:hover .card-embed-preview,.home-story-card:focus-visible .card-embed-preview,.library-card:hover .card-embed-preview,.library-card:focus-visible .card-embed-preview { opacity:1; }
.home-story-card:hover .card-gif-preview,.home-story-card:focus-visible .card-gif-preview,.library-card:hover .card-gif-preview,.library-card:focus-visible .card-gif-preview { opacity:1; }
.card-visual.use-video-frame > img { opacity:0; }
.card-visual.use-video-frame .card-preview { opacity:1; }
@media (prefers-reduced-motion: reduce) { .hero-feature .feature-preview,.card-visual .card-preview,.card-visual .card-gif-preview { display:none; } .hero-feature.auto-preview .feature-visual > img { opacity:1; } }
.worksheet.reading-level-early { border-top:8px solid var(--lime); }
.worksheet.reading-level-early .passage { background:#fffef9; }
.worksheet.reading-level-early .passage h2,.worksheet.reading-level-early .questions h2 { font-size:2.5rem; }
.worksheet.reading-level-early .passage p { max-width:32rem; font-size:1.22rem; line-height:1.82; margin-bottom:22px; }
.worksheet.reading-level-early .questions li { font-size:1.08rem; line-height:1.55; padding-bottom:24px; }
.worksheet.reading-level-early .word-bank { padding:20px 22px; border-left-color:var(--lime); font-size:1rem; }
.worksheet.reading-level-early .scientist-prompt { background:#e7f7a0; }
.worksheet.reading-level-middle { border-top:8px solid var(--aqua); }
.worksheet.reading-level-middle .word-bank { border-left-color:var(--aqua); }
.worksheet.reading-level-advanced { border-top:8px solid var(--orange); }
.worksheet.reading-level-advanced .passage { background:#fbfcf7; }
.worksheet.reading-level-advanced .passage p { font-size:1rem; line-height:1.68; }
.worksheet.reading-level-advanced .word-bank { border-left-color:var(--orange); background:#fff0e8; }
.worksheet.reading-level-advanced .word-bank::before { content:"LOOK CLOSER"; display:block; margin-bottom:7px; color:var(--orange); font:700 .66rem var(--mono); letter-spacing:.1em; }
.worksheet.reading-level-advanced .questions { background:#f0f7f4; }
.worksheet.reading-level-advanced .scientist-prompt { background:#ffd8c8; }
@media (max-width:760px) { .worksheet.reading-level-early .passage h2,.worksheet.reading-level-early .questions h2 { font-size:2.25rem; } .worksheet.reading-level-early .passage p { font-size:1.14rem; } }
.teacher-promise { display:block !important; padding:65px; background:var(--aqua); }
.teacher-intro { display:grid; grid-template-columns:1fr .9fr; gap:55px; align-items:start; }
.teacher-heading > p:last-child { max-width:470px; margin:24px 0 0; font-size:1.06rem; line-height:1.55; }
.teacher-preview-column { align-self:start; }
.teacher-video-carousel { position:relative; aspect-ratio:3/2; overflow:hidden; border:6px solid rgba(255,253,247,.92); box-shadow:10px 10px 0 rgba(23,34,29,.82); background:#183a33; }
.teacher-video-slide { position:absolute; inset:0; display:block; color:#fff; opacity:0; pointer-events:none; transition:opacity .7s ease; }
.teacher-video-slide.active { opacity:1; pointer-events:auto; }
.teacher-video-slide video { width:100%; height:100%; display:block; object-fit:cover; object-position:center; filter:saturate(.78) contrast(.96) brightness(1.04); }
.teacher-video-slide::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(12,32,28,.08) 28%,rgba(12,32,28,.78) 100%); pointer-events:none; }
.teacher-video-caption { position:absolute; z-index:1; left:18px; right:18px; bottom:16px; color:#fff; font:700 .95rem/1.08 var(--sans); text-shadow:0 1px 10px rgba(0,0,0,.48); }
.teacher-video-caption small { display:block; margin-bottom:5px; color:var(--lime); font:500 .6rem var(--mono); letter-spacing:.07em; }
.teacher-carousel-chrome { position:absolute; z-index:2; top:13px; left:14px; right:14px; display:flex; justify-content:space-between; color:rgba(255,255,255,.88); font:500 .56rem var(--mono); letter-spacing:.06em; text-transform:uppercase; pointer-events:none; }
.teacher-carousel-chrome span:last-child { padding:4px 6px; background:rgba(13,34,30,.62); }

/* Keep the library focused on finding a story, not on a large display headline. */
@media (min-width:761px) {
  .library-intro {
    max-width:none;
    display:grid;
    grid-template-columns:minmax(0,1.08fr) minmax(280px,.65fr);
    column-gap:70px;
    row-gap:18px;
    align-items:end;
    padding:38px 0 30px;
  }

  .library-intro .eyebrow { grid-column:1; margin:0; }
  .library-intro h1 { grid-column:1; font-size:clamp(3.25rem,5.4vw,5.8rem); }
  .library-intro > p:not(.eyebrow) {
    grid-column:2;
    grid-row:2;
    max-width:460px;
    margin:0 0 5px;
    font-size:1.08rem;
    line-height:1.5;
  }
}

@media (min-width:761px) {
  main .teacher-promise {
    box-sizing:border-box;
    width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    padding-left:max(65px, calc((100vw - 1400px) / 2 + 65px));
    padding-right:max(65px, calc((100vw - 1400px) / 2 + 65px));
  }
}

/* Presentation chapters: compact by default, descriptive when a teacher needs them. */
.present-progress-step {
  position:relative;
  height:9px;
  flex:1;
  padding:0;
  border:0;
  background:rgba(255,255,255,.23);
  cursor:pointer;
}
.present-progress-step.active { background:var(--lime); }
.present-progress-step:hover,.present-progress-step:focus-visible { background:#fffdf7; outline:0; }
.present-progress-step::after {
  content:attr(data-label);
  position:absolute;
  z-index:3;
  left:50%;
  bottom:calc(100% + 10px);
  transform:translateX(-50%) translateY(4px);
  padding:6px 8px;
  background:#fffdf7;
  color:var(--ink);
  box-shadow:2px 2px 0 rgba(0,0,0,.24);
  font:700 .64rem var(--sans);
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .14s ease,transform .14s ease;
}
.present-progress-step:hover::after,.present-progress-step:focus-visible::after { opacity:1; transform:translateX(-50%) translateY(0); }
.teacher-video-carousel:hover .teacher-video-slide.active::after,.teacher-video-carousel:focus-within .teacher-video-slide.active::after { background:linear-gradient(180deg,rgba(12,32,28,.02) 25%,rgba(12,32,28,.64) 100%); }
@media (prefers-reduced-motion:reduce) { .teacher-video-slide { transition:none; } }
.standards-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; margin-top:44px; border:1px solid rgba(23,34,29,.34); background:rgba(23,34,29,.34); }
.standard-card { display:flex; flex-direction:column; min-height:280px; padding:25px; overflow:hidden; background:rgba(255,253,247,.38); }
.standard-icon { order:2; width:160px; height:160px; margin:auto auto 0; object-fit:contain; }
.standard-card > :not(.standard-icon) { position:relative; z-index:1; }
.standard-card span { color:var(--orange); font-family:var(--mono); font-size:.72rem; font-weight:700; letter-spacing:.08em; }
.standard-card h3 { margin:16px 0 12px; font-family:var(--serif); font-size:1.55rem; line-height:1.05; }
.standard-card p { margin:0; font-size:.94rem; line-height:1.5; }
.standards-note { margin:18px 0 0; color:#36554c; font-size:.77rem; line-height:1.45; }
@media (max-width:760px) { .teacher-promise { padding:35px 26px; } .teacher-intro,.standards-grid { grid-template-columns:1fr; gap:30px; } .teacher-preview-column { gap:18px; } .teacher-video-carousel { aspect-ratio:16/9; } .standards-grid { gap:1px; margin-top:32px; } .standard-card { min-height:0; } }
@media (max-width:760px) { .site-nav nav { display:none; }.site-nav .nav-cta { margin-left:auto; }.home-hero { min-height:0; grid-template-columns:1fr; gap:40px; padding:24px 0 54px; }.home-hero-copy h1,.library-intro h1 { font-size:3.65rem; }.hero-feature,.hero-feature img { min-height:375px; }.home-strip { display:block; }.home-strip p,.home-strip a { display:block; padding:14px 0; border-right:0; border-bottom:1px solid var(--ink); }.home-story-grid,.library-grid { grid-template-columns:1fr; }.latest-section { padding:66px 0; }.section-heading { display:block; }.section-heading > a { display:inline-block; margin-top:16px; }.teacher-promise { grid-template-columns:1fr; gap:38px; padding:35px 26px; }.library-intro { padding:24px 0 38px; }.library-tools { display:block; }.library-tools label { max-width:none; }.topic-filters { justify-content:flex-start; margin-top:18px; }.site-footer { padding:26px 18px 38px; }.site-footer span:nth-child(2) { display:none; } }
.site-nav { justify-content:flex-start; }.site-nav nav { display:flex; gap:22px; margin-left:auto; }.site-nav nav a,.nav-cta { color:var(--ink); text-decoration:none; font:800 .8rem var(--sans); }.site-nav nav a:hover,.site-nav nav a.active { color:#bb4829; }.nav-cta { padding:10px 13px; background:var(--lime); border:1px solid var(--ink); box-shadow:3px 3px 0 var(--ink); }.home-page main,.library-page main { max-width:1280px; }.home-hero { min-height:610px; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:65px; padding:50px 0 76px; }.home-hero-copy h1,.library-intro h1 { margin:0; font:700 clamp(3.8rem,7vw,7.4rem)/.87 var(--serif); letter-spacing:-.075em; }.home-hero-copy > p:not(.eyebrow) { max-width:610px; margin:28px 0; font-size:1.15rem; line-height:1.55; }.hero-actions { display:flex; align-items:center; gap:22px; }.primary-link { padding:15px 18px; background:var(--ink); color:#fff; text-decoration:none; font:800 .88rem var(--sans); }.primary-link span { color:var(--lime); margin-left:8px; }.quiet-link { color:var(--ink); font-weight:800; font-size:.88rem; }.hero-proof { display:flex; flex-wrap:wrap; gap:10px 17px; margin-top:42px; color:#617169; font:500 .65rem var(--mono); letter-spacing:.06em; }.hero-proof span::before { content:"•"; margin-right:6px; color:var(--orange); }.hero-feature { position:relative; min-height:500px; overflow:hidden; display:block; border:6px solid var(--paper); box-shadow:12px 12px 0 var(--ink); background:var(--ink); color:#fff; text-decoration:none; }.hero-feature img { width:100%; height:100%; min-height:500px; object-fit:cover; opacity:.76; transition:transform .35s ease; }.hero-feature:hover img { transform:scale(1.035); }.feature-copy { position:absolute; inset:auto 0 0; padding:28px; background:linear-gradient(transparent,rgba(11,23,20,.95) 42%); }.feature-tag,.home-story-card i,.library-card i { display:block; margin-bottom:9px; color:var(--lime); font:500 .65rem var(--mono); letter-spacing:.08em; font-style:normal; }.feature-copy strong { display:block; max-width:450px; font:700 clamp(2.15rem,3.5vw,3.6rem)/.92 var(--serif); letter-spacing:-.06em; }.feature-copy small { display:block; margin-top:18px; font:800 .78rem var(--sans); }.feature-copy b { color:var(--lime); font-size:1.2rem; }.home-strip { display:grid; grid-template-columns:1.45fr repeat(4,1fr); border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); }.home-strip p,.home-strip a { margin:0; padding:17px 14px; border-right:1px solid var(--ink); color:var(--ink); font:800 .77rem var(--sans); text-decoration:none; }.home-strip p { padding-left:0; color:#56655d; }.home-strip a:hover { background:var(--lime); }.home-strip a span { float:right; }.latest-section { padding:105px 0; }.section-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:27px; }.section-heading h2,.teacher-promise h2 { margin:0; font:700 clamp(2.6rem,4vw,4.5rem)/.92 var(--serif); letter-spacing:-.065em; }.section-heading > a { color:var(--ink); font-weight:800; font-size:.86rem; }.home-story-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }.home-story-card,.library-card { overflow:hidden; background:var(--paper); border:1px solid #c9c5b9; color:var(--ink); text-decoration:none; transition:transform .16s ease,box-shadow .16s ease; }.home-story-card:hover,.library-card:hover { transform:translateY(-4px); box-shadow:5px 5px 0 var(--ink); border-color:var(--ink); }.home-story-card img { width:100%; height:150px; object-fit:cover; display:block; }.home-story-card > span { display:block; min-height:145px; padding:16px; }.home-story-card i,.library-card i { color:var(--orange); }.home-story-card strong,.library-card strong { display:block; font:700 1.32rem/1 var(--serif); letter-spacing:-.045em; }.home-story-card small,.library-card small { display:block; margin-top:15px; color:#68746e; font:500 .65rem var(--mono); letter-spacing:.05em; }.teacher-promise { display:grid; grid-template-columns:1fr 1fr; gap:90px; padding:65px; background:var(--aqua); }.promise-list p { display:flex; gap:17px; margin:0; padding:19px 0; border-top:1px solid rgba(23,34,29,.25); font-size:1.05rem; line-height:1.42; }.promise-list b { color:#ce532f; font:500 .8rem var(--mono); }.site-footer { max-width:1200px; margin:auto; padding:30px 34px 45px; display:flex; gap:20px; color:#596961; font:500 .72rem var(--mono); letter-spacing:.04em; }.site-footer a { margin-left:auto; color:var(--ink); font-weight:800; text-decoration:none; }.article-page { padding-top:34px; }.article-back { margin-bottom:20px; font:800 .82rem var(--sans); }.article-back a { color:var(--ink); }.library-intro { max-width:850px; padding:48px 0 55px; }.library-intro > p:not(.eyebrow) { max-width:620px; margin:26px 0 0; font-size:1.15rem; line-height:1.55; }.library-tools { display:flex; align-items:end; justify-content:space-between; gap:25px; padding:20px 0; border-top:2px solid var(--ink); border-bottom:1px solid var(--rule); }.library-tools label { flex:1; max-width:430px; }.library-tools label span { display:block; margin-bottom:7px; font:500 .65rem var(--mono); text-transform:uppercase; letter-spacing:.07em; }.library-tools input { width:100%; padding:12px 0; border:0; border-bottom:2px solid var(--ink); outline:0; background:transparent; color:var(--ink); font:700 1rem var(--sans); }.topic-filters { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px; }.topic-filters button { border:1px solid #bdb8aa; padding:8px 10px; background:transparent; color:var(--ink); font:800 .72rem var(--sans); cursor:pointer; }.topic-filters button.active,.topic-filters button:hover { background:var(--ink); border-color:var(--ink); color:#fff; }.story-count { margin:24px 0 15px; color:#63716a; font:500 .72rem var(--mono); letter-spacing:.05em; }.library-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }.library-card img { width:100%; height:190px; display:block; object-fit:cover; }.library-card-copy { display:block; min-height:182px; padding:18px; }.library-card em { display:block; margin-top:17px; color:#3e5d51; font:800 .72rem var(--sans); font-style:normal; }.library-card em b { color:var(--orange); }.empty-state { grid-column:1/-1; padding:55px 0; color:#617169; font:700 1.2rem var(--serif); }
.simple-diagram { position:relative; overflow:hidden; background:linear-gradient(145deg,#164f48,#0e2824); }.simple-diagram b,.simple-diagram strong,.simple-diagram i,.simple-diagram span { position:absolute; font:800 .75rem var(--mono); letter-spacing:.04em; font-style:normal; }.simple-diagram span { left:0; right:0; bottom:9%; color:#fff; text-align:center; }.animal-diagram b { left:12%; top:17%; padding:13px; color:var(--ink); background:var(--lime); }.animal-track { width:58px; height:38px; left:17%; top:45%; border-radius:55% 45% 52% 48%; background:#d78652; animation:animal-walk 4s ease-in-out infinite; }.animal-diagram::after { content:"WILDLIFE"; position:absolute; right:11%; top:45%; color:#fff; font:800 .78rem var(--mono); }.ocean-diagram { background:linear-gradient(#75bee3 0 35%,#184e88 35% 72%,#082e56 72%); }.ocean-diagram b { left:8%; top:18%; color:#fff; }.ocean-diagram b::after { content:""; position:absolute; left:10%; top:24px; width:125px; height:20px; background:#e6f0ef; border-radius:3px 24px 7px 6px; }.ocean-rover { left:53%; top:48%; padding:11px; color:var(--ink); background:var(--lime); border-radius:50%; animation:deep-dive 3.5s ease-in-out infinite; }.ocean-rover::before { content:""; position:absolute; left:50%; bottom:100%; height:105px; border-left:2px dashed #fff; }.cargo-diagram b { left:10%; bottom:34%; color:#80c7ee; }.cargo-diagram strong { right:10%; top:26%; color:#fff; border:2px solid #fff; padding:13px 8px; }.cargo-ship { left:31%; bottom:37%; padding:8px; color:var(--ink); background:var(--lime); transform:rotate(-20deg); animation:cargo-fly 4s linear infinite; }.lock-diagram { background:linear-gradient(#8dc9e3 0 35%,#235f94 35%); }.lock-diagram::before,.lock-diagram::after { content:""; position:absolute; top:16%; bottom:18%; width:17%; background:#c3c8be; }.lock-diagram::before { left:18%; }.lock-diagram::after { right:18%; }.lock-diagram b { left:5%; bottom:17%; color:#fff; }.lock-diagram strong { right:5%; top:17%; color:#fff; }.lock-boat { left:42%; bottom:37%; padding:8px 12px; color:var(--ink); background:var(--lime); border-radius:4px 4px 18px 18px; animation:lock-lift 4s ease-in-out infinite; }@keyframes animal-walk { 50% { transform:translateX(240px); } }@keyframes deep-dive { 50% { transform:translateY(100px); } }@keyframes cargo-fly { 0% { transform:translate(0,0) rotate(-20deg); } 100% { transform:translate(220px,-130px) rotate(-20deg); } }@keyframes lock-lift { 50% { transform:translateY(-110px); } }
.diagram-step { position:absolute; bottom:8%; padding:7px 9px; border:1px solid rgba(255,255,255,.45); background:rgba(16,47,42,.9); color:#fff; font:700 .6rem/1.35 var(--mono); letter-spacing:.02em; text-align:center; }.mars-step { left:4%; }.earth-step { right:4%; }
.media-frame video { width:100%; height:100%; display:block; background:#000; }
.media-source-preview { position:relative; display:block; width:100%; max-height:58vh; aspect-ratio:16/10; overflow:hidden; border:7px solid var(--paper); background:#102f2a; color:#fff; text-decoration:none; }
.media-source-preview img { width:100%; height:100%; object-fit:cover; display:block; filter:brightness(.72); transition:transform .25s ease,filter .25s ease; }
.media-source-preview span { position:absolute; left:18px; bottom:16px; padding:10px 12px; background:var(--lime); color:var(--ink); font:800 .78rem var(--sans); }
.media-source-preview:hover img,.media-source-preview:focus-visible img { transform:scale(1.03); filter:brightness(.9); }
.page-listen { align-self:flex-end; margin:0 0 12px; border:1px solid rgba(255,255,255,.45); padding:9px 12px; background:transparent; color:#fff; font:700 .76rem var(--sans); cursor:pointer; }.page-listen:hover { background:var(--lime); color:var(--ink); border-color:var(--lime); }
.page-listen.reading { background:var(--orange); border-color:var(--orange); color:var(--ink); }
.art-animation { background:#f6d855; }.art-panel { position:absolute; display:grid; place-items:center; width:25%; aspect-ratio:1; border:4px solid #17221d; background:#f8f5ec; color:#17221d; font:700 2.2rem var(--serif); box-shadow:7px 7px 0 #17221d; animation:panel-pop 3s ease-in-out infinite; }.panel-one { left:10%; top:22%; }.panel-two { left:37%; top:12%; animation-delay:.5s; }.panel-three { right:10%; top:25%; animation-delay:1s; }.art-path { position:absolute; left:24%; top:50%; width:52%; border-top:4px dashed #ff6e3b; transform:rotate(-6deg); }.art-animation span { position:absolute; bottom:9%; left:0; right:0; text-align:center; color:#17221d; font:700 .75rem var(--mono); letter-spacing:.06em; }.data-animation { padding:12% 12% 8%; background:linear-gradient(135deg,#275c4f,#10221e); }.chart-bars { height:64%; display:flex; align-items:end; justify-content:space-around; border-left:3px solid #fff; border-bottom:3px solid #fff; }.chart-bars i { width:14%; background:var(--lime); transform-origin:bottom; animation:bar-rise 2.5s ease-in-out infinite; }.chart-bars i:nth-child(1) { height:44%; }.chart-bars i:nth-child(2) { height:74%; animation-delay:.25s; background:var(--aqua); }.chart-bars i:nth-child(3) { height:58%; animation-delay:.5s; background:var(--orange); }.chart-bars i:nth-child(4) { height:88%; animation-delay:.75s; background:#fff; }.chart-labels { display:flex; justify-content:space-around; margin:12px 0; color:#d1ded3; font:500 .62rem var(--mono); }.data-animation > b { display:block; color:#fff; text-align:center; font:700 1.2rem var(--serif); }.art-animation,.data-animation { position:relative; overflow:hidden; }@keyframes panel-pop { 0%,15% { transform:translateY(20px) rotate(-4deg); opacity:.2; } 35%,80% { transform:translateY(0) rotate(0); opacity:1; } 100% { transform:translateY(-5px); opacity:.9; } }@keyframes bar-rise { 0%,15% { transform:scaleY(.12); } 60%,100% { transform:scaleY(1); } }
* { box-sizing:border-box; }
body { margin:0; background:radial-gradient(circle at 9% 7%, #e4f0c2 0 12%, transparent 29%), var(--cream); color:var(--ink); font-family:var(--sans); }
.site-header { max-width:1200px; margin:auto; padding:24px 34px; display:flex; align-items:center; gap:28px; border-bottom:1px solid rgba(23,34,29,.16); }
.brand { display:inline-flex; align-items:center; color:var(--ink); font-size:0; text-decoration:none; white-space:nowrap; }.brand::before { width:122px; height:22px; content:""; background:url("assets/steamlab-wordmark.svg") center / contain no-repeat; }.brand span { display:none; }.brand b { margin-left:7px; padding:5px 6px; background:var(--ink); color:#fff; font:.65rem var(--mono); letter-spacing:.08em; vertical-align:middle; }
.header-note { color:#627068; font-weight:700; font-size:.9rem; }.print-button { border:0; background:var(--ink); color:white; padding:11px 16px; border-radius:5px; font:700 .85rem var(--sans); cursor:pointer; }.print-button:hover { background:var(--orange); }
main { max-width:1200px; margin:auto; padding:68px 34px 90px; }.intro { max-width:820px; }.eyebrow,.section-kicker,.control-label { margin:0 0 11px; color:#67752f; font:500 .72rem var(--mono); letter-spacing:.1em; text-transform:uppercase; }.intro h1 { margin:0; max-width:820px; font:700 clamp(3rem,7vw,6.7rem)/.93 var(--serif); letter-spacing:-.065em; }.dek { margin:28px 0 22px; max-width:700px; font-size:1.2rem; line-height:1.5; }.story-meta { display:flex; flex-wrap:wrap; gap:10px; font:500 .67rem var(--mono); letter-spacing:.05em; color:#607068; }
.story-picker { margin-top:58px; }.picker-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:16px; }.picker-heading h2 { margin:0; font:700 1.6rem/1 var(--serif); letter-spacing:-.04em; }.story-cards { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; }.story-card { width:100%; padding:0; overflow:hidden; border:1px solid #c9c5b9; background:var(--paper); color:var(--ink); text-align:left; cursor:pointer; transition:transform .16s ease, box-shadow .16s ease; }.story-card:hover,.story-card.active { transform:translateY(-3px); box-shadow:4px 4px 0 var(--ink); border-color:var(--ink); }.story-card img { width:100%; height:132px; display:block; object-fit:cover; background:#d9e7be; }.story-card-content { min-height:125px; padding:14px; }.story-card-tag { display:block; margin-bottom:7px; color:var(--orange); font:500 .61rem var(--mono); letter-spacing:.07em; }.story-card strong { display:block; font:700 1.14rem/1.03 var(--serif); letter-spacing:-.04em; }.story-card time { display:block; margin-top:10px; color:#66736b; font:500 .63rem var(--mono); }
.reader-controls { margin:60px 0 24px; padding:19px 22px; display:grid; grid-template-columns:1fr auto; align-items:center; gap:12px 28px; border:1px solid var(--rule); background:rgba(255,253,247,.65); }.control-label { margin-bottom:3px; color:var(--ink); }.control-help { margin:0; font-size:.86rem; color:#67736c; }.level-buttons { display:flex; gap:7px; }.level-button { min-width:122px; padding:9px 12px; background:transparent; border:1px solid #c7c3b9; color:var(--ink); text-align:left; font:800 .82rem var(--sans); cursor:pointer; }.level-button small { display:block; margin-top:2px; font:500 .65rem var(--mono); color:#68746e; }.level-button.active { background:var(--lime); border-color:var(--ink); box-shadow:3px 3px 0 var(--ink); }.pdf-hint { grid-column:1 / -1; margin:0; padding-top:10px; border-top:1px solid var(--rule); font-size:.75rem; color:#66726b; }.pdf-hint b { color:var(--ink); }
.worksheet { background:var(--paper); box-shadow:0 20px 65px rgba(64,62,46,.13); }.worksheet-actions { padding:15px 27px; display:flex; align-items:center; justify-content:space-between; gap:18px; background:var(--aqua); }.worksheet-actions strong { display:block; font-size:.88rem; }.worksheet-actions span { display:block; margin-top:2px; font-size:.75rem; color:#35544b; }.article-actions { display:flex; gap:9px; }.print-button,.present-button { border:0; padding:11px 16px; border-radius:5px; font:700 .85rem var(--sans); cursor:pointer; }.print-button { background:var(--ink); color:white; }.print-button:hover { background:var(--orange); }.present-button { background:var(--paper); color:var(--ink); box-shadow:inset 0 0 0 1px rgba(23,34,29,.28); }.present-button:hover { background:var(--lime); }.hero-image { margin:0; }.hero-image img { width:100%; height:380px; object-fit:cover; object-position:center; display:block; background:#d9e7be; }.hero-image figcaption { padding:8px 27px; background:#edf5e9; color:#526157; font-size:.72rem; }.hero-image a { color:inherit; font-weight:800; }
.article-grid { display:grid; grid-template-columns:1.12fr .88fr; }.passage,.questions { padding:48px 48px 52px; }.questions { background:#f8f5ec; border-left:1px solid var(--rule); }.section-kicker { color:var(--orange); }.passage h2,.questions h2 { margin:0 0 22px; font:700 2.15rem/.98 var(--serif); letter-spacing:-.045em; }.passage p { font-size:1.07rem; line-height:1.72; margin:0 0 16px; }.word-bank { margin-top:30px; padding:16px 18px; border-left:5px solid var(--aqua); background:#e9f7f2; font-size:.9rem; line-height:1.5; }.word-bank strong { display:block; font:500 .65rem var(--mono); letter-spacing:.08em; text-transform:uppercase; margin-bottom:5px; }.word-bank b { color:#275c4f; }
.questions ol { margin:0; padding-left:25px; }.questions li { padding:0 0 20px 7px; font-size:1rem; line-height:1.45; }.answer-line { height:22px; margin-top:6px; border-bottom:1px solid #bdb8aa; }.scientist-prompt { display:flex; gap:13px; margin-top:5px; padding:19px; background:var(--lime); }.scientist-prompt > span { font-size:1.4rem; }.scientist-prompt strong { font:500 .68rem var(--mono); text-transform:uppercase; letter-spacing:.07em; }.scientist-prompt p { margin:5px 0 4px; font-size:.9rem; line-height:1.35; }.answer-lines i { display:block; height:21px; border-bottom:1px solid rgba(23,34,29,.45); }
.source-box { padding:23px 48px; display:flex; align-items:center; justify-content:space-between; gap:25px; border-top:1px solid var(--rule); background:var(--ink); color:#edf5e9; }.source-box strong { display:block; font:500 .68rem var(--mono); letter-spacing:.07em; text-transform:uppercase; }.source-box span { display:block; margin-top:5px; font-size:.82rem; color:#c8d0c7; }.source-box a { flex:none; color:var(--ink); background:var(--aqua); padding:11px 13px; text-decoration:none; font-weight:800; font-size:.78rem; }
.print-only { display:none; }
.present-view { position:fixed; z-index:20; inset:0; display:none; flex-direction:column; overflow:auto; background:radial-gradient(circle at 75% 18%, #235a57 0, transparent 35%), #10221e; color:#fffdf7; }.present-view.open { display:flex; }.present-header,.present-footer { padding:20px clamp(22px,4vw,58px); display:flex; align-items:center; justify-content:space-between; gap:18px; }.present-header { border-bottom:1px solid rgba(255,255,255,.22); }.present-brand { color:inherit; font:800 1.2rem var(--sans); letter-spacing:-.06em; text-decoration:none; }.present-brand:hover,.present-brand:focus-visible { color:var(--lime); outline:none; }.present-brand:focus-visible { outline:2px solid var(--lime); outline-offset:5px; }.present-brand b { margin-left:4px; padding:3px 5px; background:var(--lime); color:var(--ink); font:500 .65rem var(--mono); letter-spacing:.07em; }.present-header-actions { display:flex; gap:9px; }.present-header button,.present-footer button { border:1px solid rgba(255,255,255,.32); padding:9px 12px; background:transparent; color:inherit; font:700 .76rem var(--sans); cursor:pointer; }.present-header button:hover,.present-footer button:hover { background:var(--lime); color:var(--ink); border-color:var(--lime); }.present-main { width:min(1180px,100%); margin:auto; padding:20px clamp(22px,4vw,58px); flex:1; display:flex; flex-direction:column; }.present-progress { display:flex; gap:7px; margin-bottom:22px; }.present-progress i { height:5px; flex:1; background:rgba(255,255,255,.23); }.present-progress i.active { background:var(--lime); }.present-slide { flex:1; display:flex; flex-direction:column; justify-content:center; }.present-cover { display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:55px; }.present-kicker { color:var(--lime); font:500 .75rem var(--mono); letter-spacing:.1em; }.present-cover h1 { margin:16px 0 20px; font:700 clamp(3.5rem,7vw,7.5rem)/.9 var(--serif); letter-spacing:-.065em; }.present-cover p { max-width:600px; color:#d1ded3; font-size:1.2rem; line-height:1.5; }.present-photo { width:100%; height:min(54vh,570px); object-fit:cover; border:7px solid var(--paper); }.present-credit { margin-top:8px; color:#b7c8bd; font-size:.72rem; }.present-read { max-width:960px; }.present-read h2,.present-question h2 { margin:0 0 26px; font:700 clamp(2.7rem,5vw,5.2rem)/.95 var(--serif); letter-spacing:-.06em; }.present-read p { font-size:clamp(1.25rem,2.15vw,2.05rem); line-height:1.5; color:#e8eee9; }.present-question { max-width:1020px; }.question-label { color:var(--lime); font:500 .78rem var(--mono); letter-spacing:.09em; }.choice-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }.choice { padding:22px; border:2px solid rgba(255,255,255,.48); background:rgba(255,255,255,.06); color:#fff; text-align:left; font:700 clamp(1rem,1.7vw,1.45rem) var(--sans); cursor:pointer; }.choice:hover { border-color:var(--lime); background:rgba(214,245,60,.12); }.choice.correct { border-color:var(--lime); background:var(--lime); color:var(--ink); }.choice.incorrect { border-color:#ff9370; opacity:.55; }.answer-reveal { margin-top:20px; padding:16px 20px; background:var(--paper); color:var(--ink); font-size:1.05rem; line-height:1.45; }.present-footer { border-top:1px solid rgba(255,255,255,.22); }.present-footer button:last-child { background:var(--lime); color:var(--ink); border-color:var(--lime); }.present-footer button:disabled { opacity:.35; pointer-events:none; }
.present-media { display:grid; grid-template-columns:.85fr 1.15fr; align-items:center; gap:52px; }.present-media h2 { margin:12px 0 20px; font:700 clamp(3rem,5vw,5.5rem)/.92 var(--serif); letter-spacing:-.06em; }.present-media p { color:#d1ded3; font-size:1.25rem; line-height:1.5; }.present-media figure { margin:0; }.present-media img,.media-frame,.media-animation { width:100%; max-height:58vh; aspect-ratio:16/10; object-fit:cover; display:block; border:7px solid var(--paper); background:#102f2a; }.media-frame iframe { width:100%; height:100%; border:0; display:block; }.present-media figcaption { margin-top:8px; color:#b7c8bd; font-size:.72rem; }.media-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }.media-actions button,.media-actions a { display:inline-block; padding:12px 14px; border:1px solid var(--lime); background:var(--lime); color:var(--ink); text-decoration:none; font:800 .78rem var(--sans); cursor:pointer; }.media-actions a { background:transparent; color:#fff; border-color:rgba(255,255,255,.5); }.present-talk { color:#e8eee9; font-size:clamp(1.4rem,2.25vw,2.2rem); line-height:1.45; }.media-animation { position:relative; overflow:hidden; }.signal-animation .planet,.relay-orbiter { position:absolute; display:grid; place-items:center; border-radius:50%; font:700 .75rem var(--mono); letter-spacing:.04em; }.signal-animation .mars-planet { left:8%; top:39%; width:25%; aspect-ratio:1; background:radial-gradient(circle at 35% 30%, #f3ac71, #a23e2b 62%); }.signal-animation .earth-planet { right:7%; top:30%; width:30%; aspect-ratio:1; background:radial-gradient(circle at 35% 30%, #c6f0e8, #367bb2 55%, #164466); }.signal-animation .relay-orbiter { left:43%; top:15%; width:14%; aspect-ratio:1; border-radius:8px; background:var(--lime); color:var(--ink); animation:orbit 3.4s ease-in-out infinite; }.signal-line { position:absolute; height:2px; width:28%; transform-origin:left; border-top:2px dashed rgba(214,245,60,.7); }.line-one { left:29%; top:52%; transform:rotate(-28deg); }.line-two { left:55%; top:39%; transform:rotate(23deg); }.signal-pulse { position:absolute; width:12px; height:12px; background:var(--lime); border-radius:50%; box-shadow:0 0 16px var(--lime); }.pulse-one { left:31%; top:45%; animation:travel-one 2s linear infinite; }.pulse-two { left:58%; top:43%; animation:travel-two 2s linear infinite 1s; }.growth-animation { background:linear-gradient(#83d4eb 0 54%, #77462e 54%); }.growth-animation .ground { position:absolute; inset:55% 0 0; background:repeating-linear-gradient(90deg, #5b3725 0 30px, #77462e 30px 60px); }.growth-animation .sun { position:absolute; width:70px; aspect-ratio:1; right:12%; top:11%; border-radius:50%; background:#ffe36c; box-shadow:0 0 0 11px rgba(255,227,108,.22); animation:pulse-sun 2.2s ease-in-out infinite; }.growth-animation .sprout { position:absolute; bottom:38%; width:11px; height:26%; background:#3f8e4a; transform-origin:bottom; animation:grow 2.6s ease-in-out infinite; }.growth-animation .sprout::before,.growth-animation .sprout::after { content:""; position:absolute; width:46px; height:22px; background:#6cc96f; border-radius:100% 0; }.growth-animation .sprout::before { right:-43px; top:13px; }.growth-animation .sprout::after { left:-43px; top:33px; transform:scaleX(-1); }.sprout-one { left:22%; }.sprout-two { left:48%; animation-delay:.45s; }.sprout-three { left:73%; height:33%; animation-delay:.9s; }.growth-animation span { position:absolute; left:0; right:0; bottom:8%; text-align:center; color:#fff; font:700 .75rem var(--mono); letter-spacing:.06em; }@keyframes orbit { 50% { transform:translateY(18px) rotate(14deg); } }@keyframes travel-one { 0% { transform:translate(0,0); opacity:0; } 15%,70% { opacity:1; } 100% { transform:translate(160px,-85px); opacity:0; } }@keyframes travel-two { 0% { transform:translate(0,0); opacity:0; } 15%,70% { opacity:1; } 100% { transform:translate(150px,64px); opacity:0; } }@keyframes grow { 0%,15% { transform:scaleY(.15); } 60%,100% { transform:scaleY(1); } }@keyframes pulse-sun { 50% { transform:scale(1.1); } }
@media (max-width:760px) { .site-header { padding:19px; }.header-note { display:none; } main { padding:44px 18px 55px; }.intro h1 { font-size:3.35rem; }.story-picker { margin-top:40px; }.picker-heading { display:block; }.picker-heading h2 { font-size:1.45rem; }.story-cards { grid-template-columns:1fr; }.story-card { display:grid; grid-template-columns:130px 1fr; }.story-card img { height:100%; min-height:116px; }.story-card-content { min-height:0; }.reader-controls { display:flex; align-items:flex-start; flex-direction:column; }.level-buttons { width:100%; overflow:auto; padding-bottom:5px; }.level-button { min-width:135px; }.worksheet-actions { padding:14px 18px; }.worksheet-actions span { display:none; }.article-actions { width:100%; }.article-actions button { flex:1; }.hero-image img { height:240px; }.article-grid { grid-template-columns:1fr; }.passage,.questions { padding:34px 26px; }.questions { border-left:0; border-top:1px solid var(--rule); }.source-box { display:block; padding:25px 26px; }.source-box a { display:inline-block; margin-top:17px; }.present-header-actions button:not(#close-present) { display:none; }.present-cover,.present-media { grid-template-columns:1fr; gap:18px; }.present-cover h1,.present-media h2 { font-size:3.3rem; }.present-photo { height:220px; }.present-media img { max-height:300px; }.present-read h2,.present-question h2 { font-size:2.4rem; }.choice-grid { grid-template-columns:1fr; }.present-footer { padding:15px 22px; } }
@media print { @page { size:letter; margin:.42in; } body { background:white; font-size:11pt; }.no-print,.site-header,.intro,.reader-controls { display:none !important; }.print-only { display:flex; justify-content:space-between; padding:0 0 8px; border-bottom:2px solid #111; font:700 9pt var(--mono); letter-spacing:.08em; }.worksheet { box-shadow:none; }.hero-image img { height:2.3in; }.hero-image figcaption { padding:5px 0; background:white; font-size:7.5pt; }.article-grid { grid-template-columns:1fr 1fr; }.passage,.questions { padding:22px 24px; }.passage h2,.questions h2 { font-size:24pt; }.passage p,.questions li { font-size:10pt; line-height:1.46; }.passage p { margin-bottom:9px; }.word-bank { margin-top:15px; padding:10px; }.scientist-prompt { padding:12px; }.source-box { padding:10px 0 0; background:white; color:#222; border-top:1px solid #aaa; }.source-box span { color:#444; font-size:7.5pt; }.source-box a { display:none; } }

@media (min-width:761px) {
  .library-intro {
    max-width:none;
    display:grid;
    grid-template-columns:minmax(620px,1fr) minmax(280px,.58fr);
    align-items:end;
    column-gap:72px;
    row-gap:14px;
    padding:36px 0 26px;
  }

  .library-intro .eyebrow { grid-column:1; margin:0; }
  .library-intro h1 {
    grid-column:1;
    max-width:800px;
    font-size:clamp(3.2rem,4.1vw,4.45rem);
    line-height:.9;
  }

  .library-intro > p:not(.eyebrow) {
    grid-column:2;
    grid-row:2;
    max-width:380px;
    margin:0 0 5px;
    font-size:1rem;
    line-height:1.48;
  }
}

/* A quick, comparable preview of how one idea shifts across reading levels. */
.level-sample { padding:96px 0 104px; }
.level-sample-heading { display:flex; align-items:end; justify-content:space-between; gap:48px; margin-bottom:30px; }
.level-sample-heading h2 { margin:0; font:700 clamp(2.8rem,4.7vw,5.1rem)/.9 var(--serif); letter-spacing:-.07em; }
.level-sample-heading > p { max-width:420px; margin:0 0 5px; font-size:1.06rem; line-height:1.55; }
.level-sample-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.level-sample-card { min-height:330px; padding:27px 28px 24px; display:flex; flex-direction:column; border:1px solid rgba(23,34,29,.42); }
.level-sample-card > div { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.level-sample-card span { color:var(--orange); font:500 .7rem var(--mono); letter-spacing:.09em; text-transform:uppercase; }
.level-sample-card small { color:#53635c; font:700 .68rem var(--sans); }
.level-sample-card h3 { max-width:280px; margin:27px 0 14px; font:700 2rem/.98 var(--serif); letter-spacing:-.055em; }
.level-sample-card p { margin:0; font-size:1rem; line-height:1.58; }
.level-sample-card b { margin-top:auto; padding-top:22px; color:#3f6156; font:700 .74rem var(--sans); }
.level-sample-card { background:var(--paper); border-top-width:12px; transition:background .24s ease, transform .24s ease, box-shadow .24s ease; }
.level-sample-card:hover { transform:translateY(-5px); box-shadow:7px 7px 0 var(--ink); }
.level-sample-early { --level-color:#e7f7a9; border-top-color:#cbe942; }
.level-sample-middle { --level-color:#d8eee9; border-top-color:#7fcfc3; }
.level-sample-advanced { --level-color:#ffe4d8; border-top-color:#ff8b68; }
.level-sample-early:hover,.level-sample-middle:hover,.level-sample-advanced:hover { background:var(--level-color); }

@media (prefers-reduced-motion:reduce) { .level-sample-card { transition:none; } }

@media (max-width:760px) {
  .level-sample { padding:62px 0 68px; }
  .level-sample-heading { display:block; margin-bottom:24px; }
  .level-sample-heading > p { margin-top:18px; }
  .level-sample-grid { grid-template-columns:1fr; }
  .level-sample-card { min-height:0; }
  .level-sample-card h3 { margin:22px 0 12px; }
  .level-sample-card b { margin-top:24px; }
}