/* A lesson in the learning hub (learn-episode-1.html … learn-episode-8.html, written by tools/episodes.py):
   the episode itself, with its four parts, the take-home sheet, your notes and where to take a question.
   The lesson notes below it share their idea blocks with the episode's public page (components.css). */

/* The lesson ----------------------------------------------------------------------------------- */
.lesson {
  position: relative; padding-block: clamp(1.4rem, 3vw, 2.4rem) clamp(3rem, 6vw, 5rem);
  background-color: var(--paper);
  background-image: radial-gradient(ellipse 60% 55% at 96% 0%, color-mix(in srgb, var(--c) 17%, transparent), transparent 72%), var(--grain);
  background-size: auto, 260px 260px;
}
.lesson__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.3rem; margin-top: clamp(1.1rem, 2.5vw, 1.8rem); }
.lesson__name { flex: 1 1 18rem; min-width: 0; }
.lesson__stage { font-family: var(--f-hand); font-weight: 700; font-size: 1.65rem; line-height: 1; color: var(--earth); rotate: -2deg; width: fit-content; }
.lesson__head h1 { margin-top: 0.3rem; font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.6rem); line-height: 1.04; }
.lesson__status { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.7rem; }
.lesson__status .chip svg { width: 0.95rem; height: 0.95rem; }
.lesson__len { font-size: 0.85rem; font-weight: 700; color: var(--ink-3); }

.lesson__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem); gap: clamp(1.6rem, 3.5vw, 3.2rem);
  align-items: start; margin-top: clamp(1.3rem, 3vw, 2.2rem);
}

/* The player: the episode's title card, its stage of the bean painted on, until the video's in ---- */
.player { margin: 0; scroll-margin-top: 0.25rem; }
/* the card and the play button (or the lock) take turns down the screen, so a title or a line that wraps
   can't run under the button. The screen keeps to 16:9 unless its words need more, on a phone or with a
   reader's own text spacing (clip, unlike hidden, lets it grow), and the painting keeps its 16:9 size in
   the corner when it does */
.player__screen {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 0.7rem;
  aspect-ratio: 16 / 9; overflow: clip; container-type: inline-size; border-radius: 16px 13px 17px 12px;
  background-color: color-mix(in srgb, var(--c) 20%, #fbf6e8);
  background-image: radial-gradient(ellipse 55% 75% at 76% 62%, rgba(255, 253, 246, 0.75), transparent 70%), var(--grain);
  background-size: auto, 260px 260px;
  box-shadow: inset 0 0 0 2px var(--ink), 0 26px 44px -30px rgba(40, 30, 10, 0.6), 0 3px 0 var(--ink);
}
.player__card { width: 54%; margin: 5.625% 0 0 6%; display: grid; justify-items: start; gap: 0.5rem; }
.player__series { font-size: clamp(0.66rem, 0.5rem + 0.35vw, 0.78rem); font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }
.player__title { font-family: var(--f-display); font-weight: 620; font-size: clamp(1.35rem, 0.7rem + 2.5vw, 2.9rem); line-height: 1.04; color: var(--ink); text-wrap: balance; }
.player__part {
  margin-top: 0.2rem; font-family: var(--f-hand); font-weight: 700; font-size: clamp(1.15rem, 0.8rem + 1.1vw, 1.75rem); line-height: 1.05;
  color: var(--earth); rotate: -2deg;
  /* a paper halo, for where it runs onto the painting (on a phone) */
  text-shadow: 0 0 2px rgba(255, 253, 246, 0.95), 0 0 5px rgba(255, 253, 246, 0.9), 0 0 12px rgba(255, 253, 246, 0.8);
}
.player__part::before { content: "now: "; font-weight: 600; color: var(--ink-3); }
.player--later .player__part::before { content: "opens with: "; }
/* the painting is trimmed of the empty paper above the early stages, so the seed isn't lost in the corner */
.player__plant { position: absolute; right: 3%; bottom: -3%; height: calc(100cqw * 9 / 16 * 1.06 / (1 - var(--lift, 0) * 0.8)); aspect-ratio: 1157 / 1555; pointer-events: none; }
.player__plant img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; mix-blend-mode: multiply; }

.player__play {
  display: flex; align-items: center; gap: 0.8rem; margin: 0 0 5.0625% 5.5%; padding: 0; background: none; border: 0;
  font: inherit; color: var(--ink); cursor: pointer;
}
.player__play svg { width: clamp(3.2rem, 2.2rem + 3vw, 5rem); height: auto; overflow: visible; transition: scale 0.3s var(--ease-grow), rotate 0.3s var(--ease-grow); }
.player__ring { fill: var(--wattle); stroke: var(--ink); stroke-width: 2.6; stroke-linejoin: round; }
.player__tri { fill: var(--ink); }
.player__verb {
  padding: 0.4rem 0.85rem 0.45rem; border-radius: 999px; background: rgba(255, 253, 246, 0.9); border: 1.5px solid var(--ink);
  font-size: clamp(0.85rem, 0.75rem + 0.3vw, 1rem); font-weight: 800; box-shadow: 0 2px 0 var(--ink);
}
.player__play:hover svg, .player__play:focus-visible svg { scale: 1.07; rotate: -6deg; }
.player__play:focus-visible { outline: none; }
.player__play:focus-visible .player__verb { outline: 3px solid var(--focus); outline-offset: 2px; }
.player__lock {
  display: inline-flex; align-items: center; gap: 0.5rem; margin: 0 0 5.625% 6%; padding: 0.5rem 0.95rem;
  border-radius: 999px; background: rgba(30, 43, 34, 0.88); color: var(--paper); font-size: 0.9rem; font-weight: 800;
}
.player__lock svg { width: 1rem; height: 1rem; }
.player--later .player__screen { background-color: #efe9da; }
.player--later .player__plant img { filter: grayscale(0.75); opacity: 0.5; }
.player--later .player__title { color: var(--ink-2); }

.player__bar { display: flex; align-items: center; gap: 1rem; margin-top: 0.8rem; }
.player__time { flex: none; font-size: 0.85rem; font-weight: 750; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.player__parts { position: relative; flex: 1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.player__parts li {
  height: 8px; border-radius: 3px;
  background: linear-gradient(90deg, var(--leaf) calc(var(--p, 0) * 100%), rgba(30, 43, 34, 0.12) 0); box-shadow: inset 0 0 0 1px rgba(30, 43, 34, 0.35);
}
/* where the episode would pick up from */
.player__parts::after {
  content: ""; position: absolute; top: 50%; left: calc(var(--at, 0) * 100%); width: 16px; height: 16px; translate: -50% -50%;
  border-radius: 50%; background: var(--wattle); border: 2px solid var(--ink); transition: left 0.5s var(--ease-grow);
}
.player--later .player__parts::after { display: none; }
.player__cap { margin-top: 0.5rem; font-size: 0.75rem; color: var(--ink-3); text-align: right; }

/* An episode that's out, streaming (watch.js): Mux Player takes the screen inside its ink line, and
   the painted card steps aside. Pressed, the play button waits while the player loads. */
.player mux-player {
  position: absolute; left: 2px; top: 2px; width: calc(100% - 4px); height: calc(100% - 4px); aspect-ratio: auto;
  border-radius: 14px 11px 15px 10px; overflow: hidden; background: #121a14; --media-object-fit: contain;
}
.player.is-streaming .player__card, .player.is-streaming .player__plant, .player.is-streaming .player__play { display: none; }
.player.is-loading .player__play { cursor: progress; }
.player.is-loading .player__play svg { animation: player-wait 0.8s ease-in-out infinite alternate; }
@keyframes player-wait { to { scale: 1.1; rotate: -8deg; } }
.no-motion .player.is-loading .player__play svg { animation: none; }
.player__note { margin-top: 0.5rem; font-size: 0.92rem; font-weight: 650; color: var(--earth-2); }

/* The four parts, as a stem with a node for each: watched, under way, still to come */
.chapters { margin-top: clamp(1.8rem, 3.5vw, 2.6rem); }
.chapters__title { font-size: var(--step-2); }
.chapters__list { list-style: none; margin: 0.8rem 0 0; padding: 0; counter-reset: part; }
.chapter {
  counter-increment: part; position: relative; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  grid-template-areas: "dot go mark" "dot desc desc"; column-gap: 1rem; padding: 0.8rem 0.6rem 0.95rem 0.2rem; border-radius: 10px;
  transition: background-color 0.3s ease;
}
.chapter::before {
  content: counter(part); grid-area: dot; align-self: start; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; z-index: 1;
  border-radius: 50%; border: 2px solid var(--ink); background: #fffdf6;
  font-family: var(--f-display); font-weight: 650; font-size: 1rem; color: var(--ink-2);
}
.chapter::after { content: ""; position: absolute; left: calc(0.2rem + 1.2rem - 1px); top: 3.1rem; bottom: -0.75rem; width: 2px; background: rgba(30, 43, 34, 0.22); }
.chapter:last-child::after { display: none; }
.chapter.is-done::before {
  content: ""; background: var(--sap) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5 L8.6 14 L15 6.5' fill='none' stroke='%231e2b22' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 62% no-repeat;
}
.chapter.is-done::after { background: var(--leaf); }
.chapter.is-now::before { background: conic-gradient(var(--sap) calc(var(--p) * 360deg), #fffdf6 0); color: var(--ink); box-shadow: 0 0 0 4px rgba(247, 210, 106, 0.6); }
.chapter__go { grid-area: go; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.75rem; margin: 0; padding: 0.35rem 0 0; background: none; border: 0; font: inherit; color: var(--ink); text-align: left; }
button.chapter__go { cursor: pointer; }
button.chapter__go::after { content: ""; position: absolute; inset: 0; border-radius: 10px; }
button.chapter__go:focus-visible { outline: none; }
.chapter:has(button.chapter__go:focus-visible) { outline: 3px solid var(--focus); outline-offset: 1px; }
.chapter__time { min-width: 3.1em; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; color: var(--ink-3); }
.chapter__name { font-family: var(--f-display); font-size: var(--step-1); font-weight: 600; line-height: 1.2; }
.chapter:hover button.chapter__go .chapter__name { text-decoration: underline; text-decoration-color: var(--wattle); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.chapter__desc { grid-area: desc; margin-top: 0.25rem; font-size: 0.95rem; color: var(--ink-2); }
.chapter__mark { grid-area: mark; align-self: start; padding-top: 0.55rem; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--canopy-2); white-space: nowrap; }
.chapter__mark--now { color: var(--earth); }
.chapter.is-playing { background-color: rgba(247, 210, 106, 0.28); }
.lesson--later .chapter::before { color: var(--ink-3); border-color: rgba(30, 43, 34, 0.45); }

/* what you'll come away with, and Steve's words for it */
.lesson-after { margin-top: clamp(1.6rem, 3vw, 2.2rem); padding: 1.3rem 1.4rem 1.4rem; border: 1.5px dashed rgba(30, 43, 34, 0.3); border-radius: 16px 12px 17px 13px; }
.lesson-after__title { font-family: var(--f-hand); font-weight: 700; font-size: 1.95rem; line-height: 1; color: var(--earth); }
.lesson-after__list { list-style: none; margin: 0.85rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.lesson-after__list li { position: relative; padding-left: 2rem; font-size: 1.02rem; line-height: 1.45; color: var(--ink); }
.lesson-after__list li::before {
  content: ""; position: absolute; left: 0; top: 0.05rem; width: 1.35rem; height: 1.35rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M3 12.5 C 5 14, 7 16.5, 8.6 18.5 C 11.5 12, 14.5 7.5, 19.5 3' fill='none' stroke='%233f7d3a' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.lesson-after__quote { margin-top: 1.5rem; border-left-color: var(--c); }
.lesson-after__quote p { font-size: var(--step-1); }

/* Beside the lesson ------------------------------------------------------------------------------ */
.lesson__side { display: grid; gap: 1.1rem; align-content: start; }

/* the take-home sheet, taped up, ready to print for the shed wall */
.sheet {
  position: relative; margin-top: 0.8rem; padding: 1.35rem 1.3rem 1.1rem; rotate: 0.7deg;
  background-color: #fffdf5; background-image: var(--grain); background-size: 260px 260px; border-radius: 3px;
  box-shadow: 0 22px 30px -24px rgba(70, 46, 12, 0.6), 0 2px 5px -2px rgba(70, 46, 12, 0.22);
}
.sheet::before { content: ""; position: absolute; left: 50%; top: -0.8rem; width: 6.5rem; height: 1.55rem; translate: -50% 0; rotate: -3deg; background: rgba(236, 222, 184, 0.86); box-shadow: 0 1px 2px rgba(60, 40, 10, 0.14); }
.sheet__ep { display: flex; align-items: center; gap: 0.6rem; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.sheet__ep .ep-pad { width: 1.9rem; height: 1.9rem; border-radius: 5px; font-size: 0.82rem; box-shadow: inset 0 0 0 1.5px rgba(30, 43, 34, 0.9), 2px 2px 0 rgba(30, 43, 34, 0.9); }
.sheet__kick { margin-top: 0.8rem; padding-right: 4.6rem; font-family: var(--f-hand); font-weight: 700; font-size: 2.1rem; line-height: 1; color: var(--earth); }
.sheet__line { margin-top: 0.35rem; padding-right: 4.2rem; font-family: var(--f-display); font-size: 1.28rem; line-height: 1.24; color: var(--ink); text-wrap: balance; }
.sheet__plant { position: absolute; right: 0.7rem; top: 2.9rem; width: 5rem; aspect-ratio: 1157 / 1555; overflow: hidden; pointer-events: none; }
.sheet__plant img { width: 100%; height: auto; margin-top: calc(var(--lift, 0) * 100% * -1.344 * 0.7); mix-blend-mode: multiply; }
.sheet__try { margin-top: 1.1rem; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--earth); }
.sheet__list { list-style: none; margin: 0.55rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.sheet__list li { position: relative; padding-left: 1.9rem; font-size: 0.95rem; line-height: 1.4; color: var(--ink); }
.sheet__list li::before {
  content: ""; position: absolute; left: 0; top: 0.12rem; width: 1.1rem; height: 1.1rem; border: 1.8px solid var(--ink);
  border-radius: 3px 5px 3px 4px; rotate: -4deg; background: #fffdf5;
}
.sheet__list li:nth-child(even)::before { rotate: 3deg; }
.sheet__foot { margin-top: 1.1rem; padding-top: 0.65rem; border-top: 1px dashed rgba(30, 43, 34, 0.25); font-size: 0.78rem; letter-spacing: 0.04em; color: var(--ink-3); }
.sheet__print { justify-self: start; }
.sheet__print svg { width: 1rem; height: 1rem; }
.sheet--later { background-color: #f6f0e1; rotate: -0.5deg; }
.sheet__note { margin-top: 0.9rem; padding-right: 3.5rem; font-size: 0.92rem; color: var(--ink-2); }
/* a real member's note under a sheet that isn't out yet */
.sheet__tell { display: flex; align-items: center; gap: 0.5rem; font-size: 0.92rem; font-weight: 650; color: var(--ink-2); }
.sheet__tell svg { flex: none; width: 1.05rem; height: 1.05rem; color: var(--earth); }

.side-box { display: grid; gap: 0.65rem; padding: 1rem 1.1rem 1.15rem; background: var(--card); border-radius: 12px; box-shadow: var(--shadow-paper); }
.side-box__title { display: flex; align-items: center; gap: 0.5rem; font-family: var(--f-body); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.side-box__title svg { width: 1.1rem; height: 1.1rem; color: var(--earth); }
.side-box p { font-size: 0.95rem; color: var(--ink-2); }
.side-box .link-arrow { justify-self: start; color: var(--canopy); }
.side-box__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.side-box__links a {
  display: inline-block; padding: 0.32rem 0.75rem; border-radius: 999px; background: var(--paper-2); border: 1px solid rgba(30, 43, 34, 0.14);
  font-size: 0.86rem; font-weight: 700; color: var(--ink); text-decoration: none; transition: background-color 0.2s ease;
}
.side-box__links a:hover { background: var(--wattle-2); }
.side-box__asks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.ask-chip {
  position: relative; display: block; padding: 0.55rem 0.8rem 0.6rem 2.2rem; border-radius: 12px 10px 13px 9px; border: 1.5px solid rgba(30, 43, 34, 0.28);
  background: #fffdf8; font-size: 0.92rem; font-weight: 700; line-height: 1.3; color: var(--ink); text-decoration: none;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.ask-chip::before { content: "“"; position: absolute; left: 0.7rem; top: 0.15rem; font-family: var(--f-display); font-size: 1.9rem; line-height: 1; color: var(--earth); }
.ask-chip:hover { border-color: var(--ink); background: #fdf3d2; }

/* your own notes, on ruled paper, kept in this browser */
.mine__text {
  min-height: 7.4rem; resize: vertical; padding: 0.4rem 0.8rem 0.5rem; font: inherit; font-size: 0.95rem; line-height: 1.55rem;
  background-color: #fffdf8; background-image: repeating-linear-gradient(transparent 0 calc(1.55rem - 1px), rgba(91, 127, 160, 0.22) calc(1.55rem - 1px) 1.55rem);
  background-position: 0 0.4rem; background-attachment: local;
}
@media (pointer: coarse), (max-width: 760px) { .mine__text { font-size: 1rem; } }
.mine__saved { font-size: 0.78rem !important; color: var(--ink-3) !important; }

/* The lesson notes ------------------------------------------------------------------------------- */
.lesson-notes .head { margin-bottom: clamp(2.2rem, 5vw, 3.5rem); }

/* What's next ------------------------------------------------------------------------------------ */
.lesson-next { background-color: var(--paper-2); background-image: var(--grain); background-size: 260px 260px; }
.up-next {
  position: relative; display: grid; grid-template-columns: minmax(7rem, 12rem) minmax(0, 1fr); align-items: center; gap: clamp(1rem, 3vw, 2.4rem);
  max-width: 52rem; margin-inline: auto; padding: clamp(0.9rem, 2.2vw, 1.4rem) clamp(1.1rem, 3vw, 2.2rem); overflow: hidden;
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-paper), 0 0 0 2px var(--c);
  color: inherit; text-decoration: none; transition: translate 0.3s var(--ease-grow);
}
.up-next:hover { translate: 0 -3px; }
.up-next__plant { display: block; align-self: end; border-radius: 10px; background: radial-gradient(closest-side at 50% 60%, color-mix(in srgb, var(--c) 30%, transparent), transparent); }
.up-next__plant img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.up-next__kick { display: block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--earth); }
.up-next__title { display: block; margin-top: 0.4rem; font-family: var(--f-display); font-size: var(--step-3); font-weight: 600; line-height: 1.06; }
.up-next__take { display: block; margin-top: 0.5rem; max-width: 30rem; font-size: 1rem; color: var(--ink-2); }
.up-next__status { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.7rem; margin-top: 0.9rem; }
.up-next__status .chip svg { width: 0.95rem; height: 0.95rem; }
.up-next__len { font-size: 0.82rem; font-weight: 700; color: var(--ink-3); }
.up-next:hover .up-next__title { text-decoration: underline; text-decoration-color: var(--wattle); text-decoration-thickness: 3px; text-underline-offset: 0.16em; }
.up-next:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.up-next--gate { box-shadow: var(--shadow-paper), 0 0 0 2px var(--leaf); }
.up-next--gate .up-next__plant { align-self: center; background: none; }
.up-next--gate .up-next__plant img { mix-blend-mode: normal; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--rule); }
.lesson-steps { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.8rem 2rem; max-width: 52rem; margin: 1.5rem auto 0; font-weight: 750; }
.lesson-steps a { color: var(--canopy); text-decoration: none; }
.lesson-steps a:hover { text-decoration: underline; text-decoration-color: var(--wattle); text-decoration-thickness: 2px; text-underline-offset: 0.25em; }

@media (max-width: 1000px) {
  .lesson__grid { grid-template-columns: 1fr; }
  .lesson__side { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .lesson__side > .sheet, .lesson__side > .sheet__print, .lesson__side > .sheet__tell { grid-column: 1 / -1; }
  .sheet { max-width: 34rem; }
}
@media (max-width: 640px) {
  .lesson__side { grid-template-columns: 1fr; }
  /* on a phone the card sits a little lower, and the button or the lock a little higher */
  .player__card { width: 60%; gap: 0.3rem; margin: 7% 0 0 6%; }
  .player__play { gap: 0.5rem; margin: 0 0 6.5% 5.5%; }
  .player__lock { margin: 0 0 6.5% 6%; }
  .player__verb { padding: 0.3rem 0.65rem 0.35rem; }
  .player__lock { font-size: 0.8rem; padding: 0.4rem 0.75rem; }
  .chapter { grid-template-columns: 2.2rem minmax(0, 1fr); grid-template-areas: "dot go" "dot desc" "dot mark"; column-gap: 0.8rem; }
  .chapter::before { width: 2.2rem; height: 2.2rem; }
  .chapter::after { left: calc(0.2rem + 1.1rem - 1px); top: 2.9rem; }
  .chapter__mark { padding-top: 0.3rem; }
  /* the painting gives way before the title's longest word would be cut off, as far as it has to (with a reader's
     own letter spacing, on the narrowest phones) */
  .up-next { grid-template-columns: minmax(0, 6.5rem) minmax(min-content, 1fr); }
  .up-next__title { font-size: var(--step-2); }
}

/* Printing the take-home: just the sheet, filling the page ------------------------------------------ */
@media print {
  /* only the take-home sheet prints: everything else leaves the layout, not just the view, so no blank pages follow it */
  .hub-page--lesson *:not(.sheet, .sheet *, :has(.sheet)) { display: none !important; }
  .hub-page--lesson * { visibility: hidden; }
  .hub-page--lesson .sheet, .hub-page--lesson .sheet * { visibility: visible; }
  .lesson, .lesson__grid, .lesson__side { position: static !important; }
  .hub-page--lesson .sheet {
    position: absolute; left: 0; top: 0; width: 100%; max-width: none; margin: 0; padding: 14mm 14mm 10mm; rotate: none; box-shadow: none; background: #fff;
    font-size: 13pt;
  }
  .sheet::before { display: none; }
  .sheet__kick { font-size: 34pt; padding-right: 40mm; }
  .sheet__line { font-size: 22pt; padding-right: 40mm; }
  .sheet__plant { width: 34mm; top: 16mm; right: 12mm; }
  .sheet__try { margin-top: 10mm; font-size: 10pt; }
  .sheet__list { gap: 5mm; }
  .sheet__list li { font-size: 15pt; padding-left: 11mm; }
  .sheet__list li::before { width: 6mm; height: 6mm; }
  .sheet__foot { margin-top: 12mm; font-size: 9pt; }
}