header{gap:16px;flex-wrap:wrap}header a,header a:visited{color:#e5f5ff}.onboarding-main{max-width:760px;padding-top:32px}.onboarding-card{padding:28px;margin:24px 0}.onboarding-card h1{font-size:clamp(1.8rem,4vw,2.7rem);line-height:1.15}.onboarding-card h2{font-size:1.5rem}.onboarding-card label{display:block;padding:12px 0}.onboarding-card input{margin-right:10px}.onboarding-card fieldset{border:0;padding:0}.onboarding-card button{margin:12px 0}.onboarding-card li{margin:12px 0}.onboarding-card a:not(.cta),.onboarding-card a:visited{color:#075e85}.next-skill{margin:12px 0;padding:16px;background:white;border:1px solid #d8e3eb;border-radius:12px}.next-skill p{margin:4px 0}.save-offer{padding:20px;margin:18px 0;border:2px solid #0781a5;border-radius:12px;background:#f0faff}.cell-help{padding:12px 16px;background:#eef7fb;border-bottom:1px solid #d8e3eb}.course-options{margin:12px 0}.course-options summary{cursor:pointer}.course-options nav{margin-top:12px}.sheet .tools details{width:100%}.intro.lesson-intro{padding:20px 0}.intro.lesson-intro h1{font-size:clamp(1.7rem,3vw,2.7rem)}@media(max-width:800px){.onboarding-card{padding:20px}.next-skill{font-size:.95rem}}

/* ==========================================================================
   Home page hero: "how you learn" illustration (pure CSS, 14s loop).
   Every element animates against the same 14s timeline; percentages below
   are phases: 0-20 Watch · 20-40 Prompt · 40-60 Review/apply · 60-78 Check ·
   78-97 Progress · 97-100 fade. Pause = checkbox #hero-pause (:has()).
   Reduced motion = static final frame (lesson.css already removes animation).
   ========================================================================== */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
.hero-demo {
    --hd: 14s;
    flex: 0 0 440px;
    width: 440px;
    max-width: 100%;
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--ink, #15283e);
}
.hero-stage {
    display: grid;
    gap: 10px;
    padding: 14px;
    background: #fff;
    border: 1px solid #dce5ee;
    border-radius: 16px;
    box-shadow: 0 8px 30px #213c5b0a;
    animation: hd-cycle var(--hd) linear infinite;
}
.hero-demo:has(#hero-pause:checked) .hero-stage,
.hero-demo:has(#hero-pause:checked) .hero-stage * {
    animation-play-state: paused;
}

/* step strip */
.hd-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.hd-step {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px 3px 3px;
    border: 1px solid var(--line, #dce5ee);
    border-radius: 30px;
    background: #fff;
    color: #61748a;
    font-weight: 600;
    font-size: 11px;
    --done: 0;
    --nbg: #e9f0f6;
    --nfg: #4a5b6c;
    animation: var(--hd) linear infinite;
}
.hd-step i {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-style: normal;
    font-size: 10px;
    font-weight: 800;
}
.hd-step .n {
    background: var(--nbg);
    color: var(--nfg);
    opacity: calc(1 - var(--done));
}
.hd-step .ok {
    margin-left: -23px;
    background: #d8f0e4;
    color: #1f6f4a;
    opacity: var(--done);
}
.hd-step.s1 { animation-name: hd-s1; }
.hd-step.s2 { animation-name: hd-s2; }
.hd-step.s3 { animation-name: hd-s3; }
.hd-step.s4 { animation-name: hd-s4; }
@keyframes hd-s1 {
    0%, 19% { background: #eaf6fe; border-color: #0369a1; color: #075985; --nbg: #0369a1; --nfg: #fff; --done: 0; }
    21%, 100% { background: #fff; border-color: #cfe8db; color: #1f6f4a; --done: 1; }
}
@keyframes hd-s2 {
    0%, 19% { background: #fff; border-color: #dce5ee; color: #61748a; --done: 0; }
    21%, 39% { background: #eaf6fe; border-color: #0369a1; color: #075985; --nbg: #0369a1; --nfg: #fff; --done: 0; }
    41%, 100% { background: #fff; border-color: #cfe8db; color: #1f6f4a; --done: 1; }
}
@keyframes hd-s3 {
    0%, 39% { background: #fff; border-color: #dce5ee; color: #61748a; --done: 0; }
    41%, 59% { background: #eaf6fe; border-color: #0369a1; color: #075985; --nbg: #0369a1; --nfg: #fff; --done: 0; }
    61%, 100% { background: #fff; border-color: #cfe8db; color: #1f6f4a; --done: 1; }
}
@keyframes hd-s4 {
    0%, 59% { background: #fff; border-color: #dce5ee; color: #61748a; --done: 0; }
    61%, 67% { background: #eaf6fe; border-color: #0369a1; color: #075985; --nbg: #0369a1; --nfg: #fff; --done: 0; }
    69%, 100% { background: #fff; border-color: #cfe8db; color: #1f6f4a; --done: 1; }
}

/* guide + sheet row */
.hd-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 10px;
    align-items: start;
}
.hd-guide {
    display: flex;
    gap: 7px;
    align-items: flex-start;
}
.hd-avatar {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: #e6f6ff;
    color: #0284c7;
    font-size: 15px;
}
.hd-bubble {
    position: relative;
    flex: 1;
    min-width: 0;
    height: 92px;
    padding: 9px 10px;
    background: #f0f7fc;
    border: 1px solid #e2edf6;
    border-radius: 0 10px 10px;
    font-size: 11.5px;
    line-height: 1.45;
}
.hd-bubble p {
    position: absolute;
    inset: 9px 10px;
    margin: 0;
    color: #15283e;
    opacity: 0;
    animation: var(--hd) linear infinite;
}
.hd-bubble .b1 { animation-name: hd-b1; }
.hd-bubble .b2 { animation-name: hd-b2; }
.hd-bubble .b3 { animation-name: hd-b3; }
.hd-bubble .b4 { animation-name: hd-b4; }
@keyframes hd-b1 { 0%, 18% { opacity: 1; } 21%, 100% { opacity: 0; } }
@keyframes hd-b2 { 0%, 19% { opacity: 0; } 22%, 38% { opacity: 1; } 41%, 100% { opacity: 0; } }
@keyframes hd-b3 { 0%, 39% { opacity: 0; } 42%, 58% { opacity: 1; } 61%, 100% { opacity: 0; } }
@keyframes hd-b4 { 0%, 59% { opacity: 0; } 62%, 100% { opacity: 1; } }

.hd-sheet {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 11px;
    background: #fff;
    border: 1px solid #e3eaf1;
}
.hd-sheet th,
.hd-sheet td {
    height: 22px;
    padding: 0 5px;
    border: 1px solid #e3eaf1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hd-sheet th {
    width: 16px;
    padding: 0;
    text-align: center;
    background: #f3f6fa;
    color: #54657a;
    font-size: 9px;
    font-weight: 600;
}
.hd-sheet thead th {
    width: auto;
    height: 16px;
}
.hd-sheet thead th:first-child {
    width: 16px;
}
.hd-sheet td.h {
    font-weight: 700;
    background: #edf4fa;
}
.hd-sheet .src-b,
.hd-sheet .src-c,
.hd-sheet .tot-b,
.hd-sheet .tot-c {
    animation: var(--hd) linear infinite;
}
.hd-sheet .tot-b,
.hd-sheet .tot-c {
    font-weight: 700;
}
.hd-sheet .tot-b span,
.hd-sheet .tot-c span {
    opacity: 0;
    animation: var(--hd) linear infinite;
}
.hd-sheet .src-b { animation-name: hd-src-b; }
.hd-sheet .src-c { animation-name: hd-src-c; }
.hd-sheet .tot-b { animation-name: hd-tot-b; }
.hd-sheet .tot-c { animation-name: hd-tot-c; }
.hd-sheet .tot-b span { animation-name: hd-val-b; }
.hd-sheet .tot-c span { animation-name: hd-val-c; }
@keyframes hd-src-b { 0%, 4% { background: #fff; box-shadow: none; } 7%, 15% { background: #e0f4ff; box-shadow: inset 0 0 0 1px #38bdf8; } 19%, 100% { background: #fff; box-shadow: none; } }
@keyframes hd-tot-b { 0%, 10% { background: #fff; box-shadow: none; } 12%, 19% { background: #e0f4ff; box-shadow: inset 0 0 0 2px #0369a1; } 22%, 100% { background: #fff; box-shadow: none; } }
@keyframes hd-val-b { 0%, 11% { opacity: 0; } 13%, 100% { opacity: 1; } }
@keyframes hd-src-c { 0%, 49% { background: #fff; box-shadow: none; } 52%, 58% { background: #e0f4ff; box-shadow: inset 0 0 0 1px #38bdf8; } 62%, 100% { background: #fff; box-shadow: none; } }
@keyframes hd-tot-c { 0%, 51% { background: #fff; box-shadow: none; } 53%, 68% { background: #e0f4ff; box-shadow: inset 0 0 0 2px #0369a1; } 72%, 100% { background: #eefaf3; box-shadow: none; } }
@keyframes hd-val-c { 0%, 52% { opacity: 0; } 54%, 100% { opacity: 1; } }

/* action slot: prompt → review → complete → next (crossfading layers) */
.hd-slot {
    position: relative;
    height: 96px;
}
.hd-layer {
    position: absolute;
    inset: 0;
    display: grid;
    align-content: center;
    gap: 4px;
    padding: 10px 12px;
    border-radius: 10px;
    opacity: 0;
    transform: translateY(6px);
    animation: var(--hd) linear infinite;
}
.hd-layer strong {
    font-size: 13px;
}
.hd-layer small {
    color: #61748a;
    font-size: 11px;
}
.hd-prompt {
    background: #fff;
    border: 1px solid #9cc7e3;
    animation-name: hd-l-prompt;
}
.hd-label {
    font-size: 10px;
    font-weight: 700;
    color: #4a5b6c;
}
.hd-typed {
    display: inline-block;
    vertical-align: bottom;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    font: 600 13px/1.6 ui-monospace, Consolas, "Courier New", monospace;
    animation: hd-type var(--hd) steps(26, end) infinite;
}
.hd-caret {
    display: inline-block;
    width: 2px;
    height: 16px;
    margin-left: 2px;
    vertical-align: bottom;
    background: #0369a1;
    animation: hd-caret var(--hd) linear infinite, hd-blink 1s steps(2, start) infinite;
}
.hd-prompt .hd-typed,
.hd-prompt .hd-caret {
    grid-column: 1;
}
.hd-prompt {
    grid-template-columns: max-content auto;
    align-items: end;
    justify-content: start;
}
.hd-prompt .hd-label {
    grid-column: 1 / -1;
}
.hd-prompt .hd-caret {
    grid-column: 2;
}
@keyframes hd-l-prompt { 0%, 19% { opacity: 0; transform: translateY(6px); } 22%, 38% { opacity: 1; transform: none; } 41%, 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes hd-type { 0%, 23% { width: 0; } 35%, 100% { width: 26ch; } }
@keyframes hd-caret { 0%, 22% { visibility: hidden; } 23%, 37% { visibility: visible; } 38%, 100% { visibility: hidden; } }
@keyframes hd-blink { 50% { opacity: 0; } }

.hd-review {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 10px;
    background: #fffaf0;
    border: 2px dashed #e0b45c;
    animation-name: hd-l-review;
}
.hd-review .hd-tag {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    font-size: 9px;
    letter-spacing: 1px;
    font-weight: 800;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 30px;
    animation: var(--hd) linear infinite;
}
.hd-tag.pending {
    background: #fff4dc;
    color: #8a4b00;
    border: 1px solid #f1d7a0;
    animation-name: hd-tag-pending;
}
.hd-tag.saved {
    background: #e3f5ea;
    color: #1f6f4a;
    border: 1px solid #bfe3cd;
    opacity: 0;
    animation-name: hd-tag-saved;
}
.hd-review strong {
    grid-column: 1;
    grid-row: 2;
    font-family: ui-monospace, Consolas, "Courier New", monospace;
    font-size: 12.5px;
}
.hd-review small {
    grid-column: 1;
    grid-row: 3;
}
.hd-btn {
    grid-column: 2;
    grid-row: 1 / 4;
    align-self: center;
    padding: 8px 10px;
    border-radius: 8px;
    background: #0369a1;
    color: #fff;
    font-weight: 700;
    font-size: 11px;
    white-space: nowrap;
    animation: hd-btn var(--hd) linear infinite;
}
@keyframes hd-l-review { 0%, 39% { opacity: 0; transform: translateY(6px); } 42%, 58% { opacity: 1; transform: none; } 61%, 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes hd-tag-pending { 0%, 50% { opacity: 1; } 52%, 100% { opacity: 0; } }
@keyframes hd-tag-saved { 0%, 50% { opacity: 0; } 52%, 100% { opacity: 1; } }
@keyframes hd-btn { 0%, 47% { background: #0369a1; color: #fff; transform: none; } 48%, 50% { background: #075985; color: #fff; transform: scale(0.96); } 51%, 100% { background: #e9f0f6; color: #4a5b6c; transform: none; } }

.hd-done {
    background: #eefaf3;
    border: 1px solid #bfe3cd;
    color: #1f4d38;
    animation-name: hd-l-done;
}
.hd-next {
    background: #0f7a62;
    border: 1px solid #0f7a62;
    color: #fff;
    animation-name: hd-l-next;
}
.hd-next small {
    color: #d8f0e4;
}
@keyframes hd-l-done { 0%, 61% { opacity: 0; transform: translateY(6px); } 64%, 78% { opacity: 1; transform: none; } 81%, 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes hd-l-next { 0%, 81% { opacity: 0; transform: translateY(6px); } 84%, 100% { opacity: 1; transform: none; } }

/* learning path */
.hd-track {
    display: grid;
    gap: 5px;
    padding-top: 8px;
    border-top: 1px solid #e3eaf1;
}
.hd-track-title {
    font-size: 10px;
    letter-spacing: 1.2px;
    font-weight: 800;
    text-transform: uppercase;
    color: #087bad;
}
.hd-dots {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.hd-dots li {
    flex: 1;
    height: 8px;
    border-radius: 6px;
    background: #e3eaf1;
    position: relative;
}
.hd-dots li.d1,
.hd-dots li.d2 {
    animation: var(--hd) linear infinite;
}
.hd-dots li.d1 { animation-name: hd-d1; }
.hd-dots li.d2 { animation-name: hd-d2; }
@keyframes hd-d1 { 0%, 78% { background: #e3eaf1; } 81%, 100% { background: #1f8f5a; } }
@keyframes hd-d2 { 0%, 83% { background: #e3eaf1; box-shadow: none; } 86%, 100% { background: #bfe3f8; box-shadow: inset 0 0 0 2px #0369a1; } }
.hd-track p.hd-track-labels {
    margin: 0;
    font-size: 10.5px;
    color: #4a5b6c;
    line-height: 1.4;
}
.hd-track-labels b {
    color: #1f6f4a;
}
.hd-track small {
    font-size: 10px;
    color: #61748a;
}
@keyframes hd-cycle { 0%, 97% { opacity: 1; } 99.5%, 100% { opacity: 0; } }

/* caption + control */
.hero-demo figcaption {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    margin-top: 10px;
    color: #4a5b6c;
}
.hero-demo figcaption strong {
    flex-basis: 100%;
    color: #15283e;
    font-size: 13px;
}
.hd-caption {
    font-size: 11px;
}
.hd-control {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid #c9dcec;
    border-radius: 8px;
    background: #fff;
    color: #075985;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}
.hd-control input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #0369a1;
}
.hd-control:focus-within {
    outline: 3px solid #38bdf8;
    outline-offset: 2px;
}
.hd-control .when-paused,
.hero-demo:has(#hero-pause:checked) .when-playing {
    display: none;
}
.hero-demo:has(#hero-pause:checked) .when-paused {
    display: inline;
}

/* Static final frame: reduced motion, or no :has()/animation support.
   lesson.css already sets animation:none under prefers-reduced-motion. */
@media (prefers-reduced-motion: reduce) {
    .hd-step { background: #fff; border-color: #cfe8db; color: #1f6f4a; --done: 1; }
    .hd-bubble .b4 { opacity: 1; }
    .hd-sheet .tot-b span, .hd-sheet .tot-c span { opacity: 1; }
    .hd-sheet .tot-c { background: #eefaf3; }
    .hd-layer.hd-done { opacity: 1; transform: none; }
    .hd-dots li.d1 { background: #1f8f5a; }
    .hd-dots li.d2 { background: #bfe3f8; box-shadow: inset 0 0 0 2px #0369a1; }
    .hd-caret { display: none; }
    .hd-control { display: none; }
}

@media (max-width: 850px) {
    .intro.landing {
        display: block;
    }
    .hero-demo {
        width: 100%;
        max-width: 480px;
        margin-top: 28px;
    }
}
@media (max-width: 560px) {
    .hero-demo {
        margin-top: 22px;
    }
    .hero-stage {
        padding: 12px;
    }
    .hd-row {
        grid-template-columns: 1fr;
    }
    .hd-bubble {
        height: 72px;
    }
    .hd-slot {
        height: 104px;
    }
    .hd-review {
        grid-template-columns: 1fr;
    }
    .hd-btn {
        grid-column: 1;
        grid-row: 4;
        justify-self: start;
        margin-top: 4px;
        padding: 6px 10px;
    }
    .hd-review small {
        display: none;
    }
    .hd-track-labels {
        font-size: 10px;
    }
}