.course-plan-demo{isolation:isolate;position:relative;container-type:inline-size}.course-plan-demo__stage{display:grid}.course-plan-demo__scene{flex-direction:column;grid-area:1/1;min-width:0;display:flex}.course-plan-demo__footer{margin-top:auto}.course-plan-demo__bar-side{flex-shrink:0;align-items:center;gap:8px;display:flex}.course-plan-demo__steps{align-items:center;gap:2px;min-width:0;margin:0;padding:0;list-style:none;display:flex}.course-plan-demo__step{min-width:24px;min-height:34px;color:var(--color-ink-3);font:inherit;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;background:0 0;border:0;border-radius:6px;justify-content:center;align-items:center;gap:6px;padding:4px 6px;font-size:.68rem;font-weight:700;transition:color .15s,background-color .15s;display:inline-flex}.course-plan-demo__step:hover{background:var(--color-page);color:var(--color-ink-2)}.course-plan-demo__step[aria-current=step]{color:var(--color-ink)}.course-plan-demo__step-dot{background:var(--color-line);border-radius:999px;width:7px;height:7px;transition:background-color .2s,transform .2s}.course-plan-demo__step--done .course-plan-demo__step-dot{background:var(--color-muted)}.course-plan-demo__step[aria-current=step] .course-plan-demo__step-dot{background:var(--color-accent);transform:scale(1.3)}.course-plan-demo__control{min-width:76px;min-height:34px;color:var(--color-ink-2);font:inherit;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:6px;justify-content:center;align-items:center;gap:6px;padding:5px 7px;font-size:.75rem;transition:background-color .15s,border-color .15s;display:inline-flex}.course-plan-demo__control:hover{background:var(--color-page);border-color:var(--color-line)}.course-plan-demo__title{align-items:start;max-width:100%;display:inline-grid;position:relative}.course-plan-demo__title-size,.course-plan-demo__title-text{grid-area:1/1}.course-plan-demo__title-size{visibility:hidden}.course-plan-demo__edit-focus{border:1px solid var(--color-accent-line);z-index:-1;border-radius:5px;position:absolute;inset:-5px -7px;box-shadow:0 0 0 3px #c2610c0a}.course-plan-demo__caret{vertical-align:-.1em;width:0;height:1em;box-shadow:1px 0 0 var(--color-accent);display:inline-block}.course-plan-demo__activity-slot{align-items:center;min-width:0;display:inline-grid}.course-plan-demo__add,.course-plan-demo__new-activity{white-space:nowrap;transform-origin:0;grid-area:1/1}.course-plan-demo__switch{background:var(--color-line);border-radius:999px;width:30px;height:18px;transition:background-color .18s;display:inline-block;position:relative}.course-plan-demo__switch i{background:var(--color-surface);border-radius:999px;width:14px;height:14px;transition:transform .18s;position:absolute;top:2px;left:2px;box-shadow:0 1px 2px #2d231433}.course-plan-demo__switch--on{background:var(--color-accent)}.course-plan-demo__switch--on i{transform:translate(12px)}.course-plan-demo__dots{gap:3px;display:inline-flex}.course-plan-demo__dots i{background:var(--color-accent);border-radius:999px;width:5px;height:5px}.course-plan-demo__cursor{z-index:5;pointer-events:none;transform-origin:0 0;filter:drop-shadow(0 2px 2px #2d231429);position:absolute;top:0;left:0}@container (width<=620px){.course-plan-demo__step:not([aria-current=step]) .course-plan-demo__step-label{display:none}.course-plan-demo__steps{gap:0}.course-plan-demo__step{gap:4px;padding-inline:3px}.course-plan-demo__bar-side{gap:4px}}@container (width<=420px){.course-plan-demo__bar{flex-wrap:wrap;row-gap:0}.course-plan-demo__steps{flex-basis:100%}.course-plan-demo__bar-side{flex-basis:100%;min-height:34px}.course-plan-demo__bar-side>:last-child{margin-left:auto}.course-plan-demo__control{justify-content:flex-start;padding-left:2px}}@media (prefers-reduced-motion:reduce){.course-plan-demo__cursor{display:none}}