/* The outline follows the same arch as the illustration. */
.hero-art .art-frame{border-radius:42% 42% 22px 22px;aspect-ratio:1.12;overflow:hidden;outline:1px solid var(--line);outline-offset:8px}
.hero-art .art-frame .lesson-illustration{display:block;width:100%;height:100%;min-height:0;aspect-ratio:auto;object-fit:cover;object-position:50% 50%}
.hero-art .orbit{display:none}
.hero-art .note-bottom{position:relative;left:auto;bottom:auto;display:flex;width:fit-content;max-width:100%;margin:-24px 0 0;z-index:2;animation:none}
.hero-art .art-caption{position:static;clear:both;display:block;margin:14px 0 0;text-align:right;font-size:11px;line-height:1.6}
.hero-art .note-top{right:0;z-index:2}
@media(min-width:651px){
 .header #main-navigation{gap:24px}
 .header #main-navigation a{white-space:nowrap}
 .header #main-navigation .nav-contact{display:inline-flex;align-items:center;padding:10px 16px}
 .header #main-navigation .nav-contact span{margin-left:10px}
 .header-actions{margin-left:20px}
}
@media(min-width:651px) and (max-width:1100px){
 .header{padding-inline:20px}
 .header #main-navigation{gap:14px;font-size:13px}
 .header-actions{margin-left:12px}
}
@media(max-width:650px){
 .hero-art{padding-inline:12px;padding-bottom:24px}
 .hero-art .art-caption{text-align:center;margin-top:16px}
 .hero-art .note-bottom{font-size:11px;padding:12px 14px}
 .hero-art .note-top{right:6px}
}

.ava-help-slot{margin:16px 0 20px;text-align:left}
.ava-inline-help{appearance:none;position:static;background:none;border:0;border-radius:3px;padding:4px 0;color:var(--green);font:inherit;font-size:13px;line-height:1.6;text-decoration:underline;text-underline-offset:4px;cursor:pointer;transition:color .2s}
.ava-inline-help:focus-visible{outline:2px solid var(--green);outline-offset:4px}
.ava-inline-help:hover{color:var(--ink)}