.demo-connect{background:#eee;color:#666;font-family:K2D,Arial,sans-serif}
.demo-connect .container{max-width:1140px}
.demo-connect-heading{align-items:center;background:#fff;border-radius:24px;box-shadow:0 4px 12px #00000010;display:flex;gap:16px;justify-content:space-between;margin:30px 0 24px;padding:20px 24px}
.demo-connect-heading__title{align-items:center;display:flex;gap:10px;min-width:0}
.demo-connect-heading h1{color:#444;font-size:24px;margin:0;text-align:left}
.demo-connect-help{flex:none}
.demo-connect-help button{width:25px;height:25px;padding:0;border:0;border-radius:50%;background:#ffc66a;color:#59421f;font-weight:700}
.demo-connect-help button:focus-visible{outline:3px solid #405e80;outline-offset:3px}
.demo-connect-modal{width:min(620px,calc(100% - 32px));margin:auto;padding:0;border:0;border-radius:20px;background:#fff;color:#444;box-shadow:0 18px 48px #0006}
.demo-connect-modal::backdrop{background:#18293bb3}
.demo-connect-modal__content{position:relative;padding:36px 40px 32px}
.demo-connect-modal h2,.demo-connect-modal h3{color:#405e80}
.demo-connect-modal h2{margin:0 36px 14px 0;font-size:32px}
.demo-connect-modal h3{margin:26px 0 10px;font-size:23px}
.demo-connect-modal p{margin:0;font-size:17px;line-height:1.6}
.demo-connect-modal__close{position:absolute;top:16px;right:18px;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:#eee;color:#444;font-size:30px;line-height:1;cursor:pointer}
.demo-connect-modal__close:hover{background:#ddd}.demo-connect-modal__close:focus-visible{outline:3px solid #405e80;outline-offset:3px}
.demo-connect-note{text-align:center;font-size:14px;margin-bottom:24px}
.demo-connect-step{position:relative;padding:24px 20px;margin-bottom:9px;border-radius:16px;background:var(--step-color);color:white;text-align:center;box-shadow:0 4px 8px #0002}
.demo-connect-step h2{font-size:24px;margin:0 0 6px}
.demo-connect-step p{font-size:clamp(24px,4vw,40px);font-weight:700;line-height:1.2;margin:0;overflow-wrap:anywhere}
.demo-connect-step:not(:last-child)::after{content:'';position:absolute;left:50%;bottom:-24px;transform:translateX(-50%);border-left:26px solid transparent;border-right:26px solid transparent;border-top:26px solid var(--step-color)}
.demo-connect-step.step-one{--step-color:#4ca096;z-index:3}
.demo-connect-step.step-two{--step-color:#f68c2d;z-index:2}
.demo-connect-step.step-three{--step-color:#844184;z-index:1}
.demo-connect-students{background:#ccc;border-radius:24px;padding:24px;margin:24px 0}
.demo-connect-students__header{align-items:center;display:flex;gap:16px;justify-content:space-between;margin-bottom:20px}
.demo-connect-students h2{font-size:24px;margin:0;color:#444}
.demo-connect-view-switch{align-items:center;background:#aaa;border-radius:999px;display:flex;flex:none;gap:3px;padding:3px}
.demo-connect-view-switch button{align-items:center;background:transparent;border:0;border-radius:50%;display:flex;height:42px;justify-content:center;padding:7px;width:42px}
.demo-connect-view-switch button.is-active{background:#ffc368;box-shadow:0 2px 8px #0003}
.demo-connect-view-switch img{display:block;filter:brightness(0) invert(1);height:27px;width:27px}
.demo-connect-view-switch button:not(.is-active) img{opacity:.55}
.demo-connect-view-switch button:focus-visible,.demo-progress-course-switch button:focus-visible{outline:3px solid #405e80;outline-offset:3px}
.demo-connect-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.demo-student{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 8px;background:white;border-radius:16px;box-shadow:0 4px 10px #0002;text-align:center}
.demo-student img{border-radius:50%;object-fit:cover}.demo-student strong{font-size:22px}.demo-student span{font-size:13px}
[hidden]{display:none!important}
.demo-connect-progress{min-width:0}
.demo-progress-course-switch{background:#b7b7b7;border-radius:999px;display:flex;flex:none;margin-left:auto;padding:3px;width:max-content}
.demo-progress-course-switch button{background:transparent;border:0;border-radius:999px;color:#444;font:700 15px/1 K2D,Arial,sans-serif;padding:9px 18px}
.demo-progress-course-switch button.is-active{background:#fff;box-shadow:0 2px 7px #0002;color:#333}
.demo-progress-table-wrap{border-radius:16px;box-shadow:0 3px 12px #0002;max-width:100%;overflow:auto}
.demo-progress-table{background:#fff;border-collapse:separate;border-spacing:0;min-width:640px;width:100%}
.demo-progress-table th,.demo-progress-table td{border-bottom:1px solid #ddd;border-right:1px solid #ddd}
.demo-progress-table thead th{height:190px}
.demo-progress-student-heading{background:#fff;color:#444;font-size:17px;left:0;min-width:150px;padding:14px;position:sticky;text-align:left;vertical-align:bottom;z-index:4}
.demo-progress-activity{background:var(--activity-colour);color:#fff;min-width:112px;padding:10px;text-align:center;vertical-align:middle}
.demo-progress-activity span{display:inline-block;font-size:15px;line-height:1.15;writing-mode:vertical-rl;transform:rotate(180deg)}
.demo-progress-student{align-items:center;background:#fff;display:flex;gap:10px;left:0;min-width:150px;padding:9px 12px;position:sticky;z-index:3}
.demo-progress-student img{border-radius:50%;flex:none;object-fit:cover}
.demo-progress-student strong{color:#4a4a4a;font-size:17px}
.demo-progress-table td{background:color-mix(in srgb,var(--activity-colour) 13%,white);color:#3f3f3f;font-size:17px;font-weight:700;padding:12px;text-align:center}
.demo-progress-table tbody tr:last-child th,.demo-progress-table tbody tr:last-child td{border-bottom:0}
.demo-progress-table th:last-child,.demo-progress-table td:last-child{border-right:0}
.demo-progress-table thead th:first-child{border-radius:16px 0 0 0}
.demo-progress-table thead th:last-child{border-radius:0 16px 0 0}
.demo-progress-table tbody tr:last-child th{border-radius:0 0 0 16px}
.demo-progress-table tbody tr:last-child td:last-child{border-radius:0 0 16px 0}
@media(max-width:767px){.demo-connect-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.demo-progress-student-heading,.demo-progress-student{min-width:128px}.demo-progress-activity{min-width:96px}}
@media(max-width:480px){.demo-connect-heading{padding:16px}.demo-connect-heading h1{font-size:20px}.demo-connect-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.demo-connect-students{padding:16px}.demo-connect-students__header{align-items:flex-start}.demo-connect-students h2{font-size:20px}.demo-connect-view-switch button{height:36px;padding:6px;width:36px}.demo-connect-view-switch img{height:23px;width:23px}.demo-connect-modal__content{padding:30px 24px 26px}.demo-connect-modal h2{font-size:28px}.demo-connect-modal p{font-size:16px}}