body{margin:0}button{font:inherit}a{text-underline-offset:4px}.lessons .apps-games__header nav a[aria-current=page]{color:var(--blue)}.lessons .apps-games__hero-copy{pointer-events:auto}.lessons .apps-games__hero{height:auto;min-height:690px;padding-bottom:82px}.lessons .apps-games__hero-bottom{position:relative;margin-top:80px}.lessons .apps-games__hero-copy{max-width:680px}.lessons__directory{padding-top:56px}.lessons .apps-games__card{max-width:840px}.lessons .project-art img{object-fit:cover}.lessons__countbar{display:flex;justify-content:space-between;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:30px 0 36px;font:10px monospace;color:var(--muted)}.lesson-heading{margin:0 4.5%;padding:62px 0 42px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:flex-start;gap:40px}.lesson-heading h1{font-size:clamp(48px,5.4vw,86px);max-width:960px;margin-bottom:24px}.lesson-heading h1 em{font-family:Georgia,serif;font-weight:400}.lesson-heading>div>p:last-child{font-size:14px;color:var(--muted);max-width:560px;line-height:1.75}.lesson-languages{display:flex;border:1px solid var(--line);padding:4px;border-radius:100px;white-space:nowrap;gap:3px}.lesson-languages a{font-size:11px;padding:10px 14px;border-radius:100px}.lesson-languages a[aria-current=page]{background:var(--ink);color:var(--paper)}.lesson-layout{display:grid;grid-template-columns:minmax(280px,390px) minmax(0,640px);gap:8vw;padding:48px 4.5% 80px;justify-content:center}.lesson-video video{width:100%;border-radius:3px;display:block;background:var(--ink)}.lesson-video>p{font:10px/1.7 monospace;color:var(--muted);margin-top:18px}.lesson-copy h2{font-weight:400;font-size:clamp(30px,3vw,46px);line-height:1.15;letter-spacing:-.05em;margin:0 0 28px}.lesson-copy p,.lesson-copy li{font-size:14px;line-height:1.85;color:#62685e}.lesson-copy ol{list-style:none;counter-reset:steps;padding:0;margin:30px 0}.lesson-copy li{counter-increment:steps;border-top:1px solid var(--line);padding:18px 0 18px 43px;position:relative}.lesson-copy li:before{content:'0' counter(steps);position:absolute;left:0;top:20px;font:10px monospace;color:var(--blue)}.lesson-copy li strong{display:block;font-size:17px;color:var(--ink);font-weight:500}.lesson-cta{display:inline-flex;align-items:center;gap:35px;border-bottom:1px solid var(--ink);padding-bottom:12px;margin:10px 0 15px;font-size:13px}.lesson-transcript{border-top:1px solid var(--line);margin:32px 0 0}.lesson-transcript summary{font-size:12px;cursor:pointer;padding:18px 0}.lesson-copy .lesson-note{font-size:11px;color:var(--muted);margin-top:24px}.lesson-copy a:not(.lesson-cta){text-decoration:underline}.lesson-copy .back-link{font:11px monospace;display:inline-block;margin-top:24px}.lessons[lang=ja] h1{letter-spacing:-.045em;line-height:1.3;font-size:clamp(36px,4.5vw,64px)}.lessons[lang=ja] h2{letter-spacing:0;line-height:1.45}.lessons[lang=ja] .lesson-copy p,.lessons[lang=ja] .lesson-copy li{line-height:2}.lessons__card-actions{margin-top:18px;font:11px monospace}.lessons__card-actions a{border-bottom:1px solid var(--ink);padding-bottom:5px}.lessons__card-actions a+a{margin-left:25px}@media(min-width:1600px){.lesson-heading{max-width:1660px;margin-left:auto;margin-right:auto}.lesson-layout{max-width:1810px;margin:auto}.lessons .apps-games__hero-copy{padding-top:80px}}@media(max-width:1100px){.lessons .apps-games__hero-copy{max-width:58%}.lesson-heading{display:block}.lesson-languages{width:fit-content;margin-top:28px}.lesson-layout{gap:5vw}}@media(max-width:700px){.lessons .apps-games__hero{padding-bottom:0;min-height:0}.lessons .apps-games__hero-copy{max-width:100%}.lessons .apps-games__hero-copy h1{font-size:clamp(52px,9.5vw,66px)}.lessons .apps-games__hero-bottom{margin-top:30px}.lesson-heading{margin:0 6%;padding:40px 0 30px}.lesson-heading h1{font-size:43px;line-height:1.1}.lesson-layout{display:block;padding:28px 6% 55px}.lesson-video{max-width:360px;margin:0 auto 42px}.lesson-copy h2{font-size:34px}.lesson-copy p,.lesson-copy li{font-size:15px}.lessons .apps-games__header nav{gap:12px}.lessons .apps-games__header nav a{font-size:10px}.lessons[lang=ja] h1{font-size:35px}.lesson-languages a{min-height:40px}}

/* Collection artwork keeps its original composition instead of a blanket crop. */
.lessons__directory .apps-games__art-wrap {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  aspect-ratio: auto;
  overflow: visible;
  background: transparent;
}
.lessons__directory .project-art {
  grid-area: 2 / 1 / 3 / -1;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  height: auto;
  border-radius: 5px;
  background: var(--lesson-art-paper, #f5f6ef);
  isolation: isolate;
  transform: none;
}
.lessons__directory .project-art::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgb(20 26 20 / 6%);
  border-radius: inherit;
  pointer-events: none;
}
.lessons__directory .lesson-art-image {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.lessons__directory .project-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.lessons__directory .apps-games__card-category {
  grid-area: 1 / 1;
  position: static;
  align-self: center;
  justify-self: start;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font: 10px / 1.5 monospace;
}
.lessons__directory .apps-games__card-arrow {
  grid-area: 1 / 2;
  position: static;
  width: 28px;
  height: 28px;
  background: transparent;
  border: 1px solid var(--line);
  font-size: 14px;
}
.lessons__directory .apps-games__card:hover .project-art {
  transform: none;
}
.lessons__directory .apps-games__card > a:focus-visible .project-art {
  outline: 2px solid var(--blue);
  outline-offset: 4px;
}
.lessons__directory a[href^="/lessons/one-clock"] .project-art { --lesson-art-paper: #e9e8e3; }
.lessons__directory a[href^="/lessons/making-water"] .project-art { --lesson-art-paper: #e5e8df; }
.lessons__directory a[href^="/lessons/scroll-press"] .project-art { --lesson-art-paper: #fdfef9; }
.lessons__directory a[href^="/lessons/diffuse-gradient"] .project-art { --lesson-art-paper: #f8f5e8; }
.lessons__directory a[href^="/lessons/natural-network"] .project-art { --lesson-art-paper: #52643b; }
.lessons__directory a[href^="/lessons/glow-cards"] .project-art { --lesson-art-paper: #101114; }
.lessons__directory a[href^="/lessons/emotional-buttons"] .project-art { --lesson-art-paper: #101311; }
.lessons__directory a[href^="/lessons/digital-life"] .project-art { --lesson-art-paper: #04050c; }
.lessons__directory a[href^="/lessons/foil-card"] .project-art { --lesson-art-paper: #0c0d11; }
.lessons__directory a[href^="/lessons/liquid-orbit"] .project-art { --lesson-art-paper: #08090d; }
.lessons__directory a[href^="/lessons/invisible-map"] .project-art { --lesson-art-paper: #efeee7; }
.lessons__directory a[href^="/lessons/cloud-passage"] .project-art { --lesson-art-paper: #3f60c4; }

/* Reframe existing captures in CSS; retain the original files and proportions. */
.lessons__directory a[href^="/lessons/cloud-passage"] .lesson-art-image {
  width: 97.48%;
  height: auto;
  aspect-ratio: 1019 / 784;
}
.lessons__directory a[href^="/lessons/cloud-passage"] img {
  position: absolute;
  max-width: none;
  width: 141.32%;
  height: 140.31%;
  left: -6.38%;
  top: -12.76%;
  object-fit: fill;
}
.lessons__directory a[href^="/lessons/liquid-orbit"] .lesson-art-image {
  height: auto;
  aspect-ratio: 1200 / 729;
}
.lessons__directory a[href^="/lessons/liquid-orbit"] img {
  position: absolute;
  height: 123.46%;
  top: -23.46%;
  object-fit: fill;
}