@layer components{.lesson-page{max-width:var(--page-max);padding:clamp(1.25rem, .75rem + 2vw, 2.75rem) var(--page-gutter) calc(var(--space-section) * .75);gap:clamp(1.75rem,1.25rem + 2vw,3rem);margin-inline:auto;display:grid}.lesson-page__back a{min-height:2.75rem;color:var(--delft);align-items:center;gap:.625rem;font-weight:600;text-decoration:none;display:inline-flex}.lesson-page__back a:before{content:"";border-block-end:1.5px solid;border-inline-start:1.5px solid;block-size:.5rem;inline-size:.5rem;transform:rotate(45deg)}:where([dir=rtl]) .lesson-page__back a:before{transform:rotate(-45deg)}.lesson-page__head{align-items:center;gap:2rem;display:grid}@media (min-width:60rem){.lesson-page__head{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,1rem + 3vw,4.5rem)}}.lesson-page__copy{justify-items:start;gap:1rem;display:grid}.lesson-page__meta{font-size:var(--text-small);color:var(--ink-muted);flex-wrap:wrap;align-items:center;gap:.5rem .875rem;display:flex}.lesson-page__minutes{align-items:center;gap:.4rem;display:inline-flex}.lesson-page__minutes:before{content:"";border:1.5px solid var(--delft);background:linear-gradient(var(--delft), var(--delft)) 50% 30% / 1.5px 40% no-repeat, linear-gradient(90deg, var(--delft), var(--delft)) 70% 50% / 35% 1.5px no-repeat;border-radius:50%;flex:none;block-size:.9375rem;inline-size:.9375rem}.lesson-page__title{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;max-width:16ch;font-size:var(--text-hero);font-variation-settings:"opsz" 60;letter-spacing:-.025em;line-height:1}.lesson-page__title-translation{font-size:var(--text-lead);color:var(--ink-muted)}.lesson-page__lead{max-width:36rem;font-size:var(--text-lead)}.lesson-page__lead-translation{max-width:36rem;color:var(--ink-muted)}.lesson-page__note{font-size:var(--text-small);color:var(--ink-muted)}.lesson-page__actions{margin-block-start:.5rem}.lesson-page__scene{border:1px solid var(--line);border-radius:var(--radius-tile);background:var(--surface);width:min(100%,32rem);box-shadow:var(--shadow-joint-lift);justify-self:center;margin:0;padding:.625rem;position:relative;transform:rotate(1deg)}:where([dir=rtl]) .lesson-page__scene{transform:rotate(-1deg)}.lesson-page__scene img{aspect-ratio:4/3;object-fit:cover;border-radius:2px;width:100%;height:auto;display:block}.lesson-page__scene .corner-ornament{z-index:1}.lesson-page__scene[data-kind=art]{width:min(64%,19rem);padding:.75rem;transform:rotate(-2deg)}:where([dir=rtl]) .lesson-page__scene[data-kind=art]{transform:rotate(2deg)}.lesson-page__scene-label{border:1px solid var(--line);border-radius:var(--radius-tile);background:var(--surface);color:var(--ink);padding:.125rem .5rem;font-size:.8125rem;position:absolute;inset-block-end:1.25rem;inset-inline-start:1.25rem}.listen-entry{border:1px solid var(--band-line);border-radius:var(--radius-tile);background:var(--band);color:var(--band-ink);box-shadow:var(--shadow-joint);transition:transform var(--duration-normal) var(--ease-tegel), box-shadow var(--duration-normal) var(--ease-tegel);align-items:center;gap:1rem 1.25rem;padding-block:.875rem;padding-inline:.875rem 1.25rem;text-decoration:none;display:flex}.site-main a.listen-entry:hover{box-shadow:var(--shadow-joint-lift);text-decoration-line:none;transform:translateY(-2px)}.listen-entry:active{box-shadow:var(--shadow-tile);transform:translateY(1px)}.listen-entry__play{border:1.5px solid var(--band-ink);border-radius:var(--radius-tile);background:var(--action);block-size:3.25rem;inline-size:3.25rem;box-shadow:0 3px 0 var(--action-depth);flex:none;place-items:center;display:grid}.listen-entry__play:before{content:"";border-top:.5rem solid #0000;border-bottom:.5rem solid #0000;border-left:.8rem solid var(--on-action);margin-left:.25rem}.listen-entry__text{gap:.125rem;display:grid}.listen-entry__title{font-size:1.125rem;font-weight:650}.listen-entry__note{font-size:var(--text-small);color:var(--band-ink-muted)}.listen-entry__wave{align-items:center;gap:3px;block-size:2.25rem;margin-inline-start:auto;display:none}@media (min-width:40rem){.listen-entry__wave{display:flex}}.listen-entry__wave>span{inline-size:3px;block-size:calc(var(--h,.5) * 100%);background:var(--band-ink-muted);border-radius:2px}.lesson-goals{gap:1.25rem;display:grid}.lesson-goals__title{font-size:var(--text-section);font-variation-settings:"opsz" 60;line-height:1.08}.lesson-goals__title:before{content:"";background:var(--delft);block-size:1.5px;inline-size:2.75rem;margin-block-end:1rem;display:block}.lesson-goals__can-do{border:1px solid var(--line);border-inline-start:4px solid var(--delft);border-radius:var(--radius-tile);background:var(--glaze-sheen), var(--surface);max-width:52rem;box-shadow:var(--shadow-joint);padding:clamp(1.25rem,1rem + 1.5vw,2.25rem);position:relative}.lesson-goals__sentence{font-family:var(--font-display);font-size:var(--text-story);font-weight:650;line-height:1.25}.lesson-goals__translation{font-size:var(--text-small);color:var(--ink-muted);margin-block-start:.375rem;display:block}.lesson-goals__list{grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:.75rem;margin:0;padding:0;list-style:none;display:grid}.lesson-goals__item{border:1px solid var(--line);border-radius:var(--radius-tile);background:var(--surface);box-shadow:var(--shadow-tile);padding-block:1rem;padding-inline:3rem 1.125rem;position:relative}.lesson-goals__item:before{content:"";border:1.5px solid var(--delft);background:radial-gradient(circle, var(--delft) 0 2px, transparent 2.5px), var(--tile);border-radius:2px;width:1.125rem;height:1.125rem;position:absolute;inset-block-start:1.2rem;inset-inline-start:1.125rem}.lesson-goals__machine{font-size:var(--text-small);color:var(--ink-muted)}.listen-frame-section{max-width:66rem}.listen-frame{padding:calc(var(--plint) + clamp(1rem, .5rem + 2vw, 2.25rem)) clamp(1rem, .5rem + 2vw, 2.25rem) clamp(1rem, .5rem + 2vw, 2.25rem);border:1px solid var(--line);border-radius:var(--radius-tile);background:var(--glaze-sheen), var(--glaze-noise), var(--surface);box-shadow:var(--shadow-joint), var(--shadow-sheet)}}