.story{position:relative;max-width:1100px;margin:0 auto;padding:40px 24px}.story__track{position:absolute;left:50%;top:80px;bottom:80px;width:4px;background:repeating-linear-gradient(to bottom,var(--duo-gray-light) 0 12px,transparent 12px 24px);transform:translateX(-50%)}.story__step{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 120px minmax(0,1fr);gap:24px;align-items:center;margin-bottom:56px}.story__step .story__copy{grid-column:1;grid-row:1;text-align:right;min-width:0}.story__step .story__art{grid-column:3;grid-row:1;min-width:0}.story__step .story__dot{grid-column:2;grid-row:1}.story__step.is-flip .story__copy{grid-column:3;text-align:left}.story__step.is-flip .story__art{grid-column:1}.story__dot{grid-column:2;justify-self:center;width:72px;height:72px;border-radius:50%;background:var(--c,var(--duo));color:#fff;border:solid var(--cb,var(--duo-hover));border-width:3px 3px 6px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:22px;z-index:2}.story__copy h3{font-size:26px;font-weight:900;color:var(--neutral-800);margin:0 0 8px;letter-spacing:-.01em}.story__copy p{color:var(--duo-gray);font-size:16px;line-height:1.5;margin:0}.story__art .prev-mock{max-width:440px}@media (max-width:860px){.story__track{left:36px}.story__step{grid-template-columns:72px 1fr;gap:20px}.story__step .story__copy,.story__step.is-flip .story__copy{grid-column:2;text-align:left}.story__step .story__art,.story__step.is-flip .story__art{grid-column:2}.story__dot{grid-column:1}}.type-mock{font-family:var(--font-mono);font-size:13px;background:#0f172a;color:#e2e8f0;border-radius:12px;padding:18px;line-height:1.6;min-height:140px}.type-mock .k{color:#a5f3ac}.type-mock .s{color:#fbbf77}.cursor{animation:blink 1s steps(2) infinite}.student-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}.mini-student{border:solid var(--duo-gray-light);border-width:2px 2px 4px;border-radius:14px;padding:12px;background:#fff;display:flex;gap:10px;align-items:center}.mini-student img{width:44px;height:44px;border-radius:50%;background:var(--bg-3);padding:4px}.mini-student .n{font-weight:900;color:var(--neutral-800);font-size:13px}.mini-student .p{color:var(--fg-3);font-size:11px}.ribbon{background:linear-gradient(90deg,#58cc02,#1cb0f6,#ce82ff);padding:14px 24px;color:#fff;text-align:center;font-weight:800;font-size:14px;letter-spacing:.04em}.ruler{padding:40px 24px 80px;background:var(--bg-2)}.ruler__inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);gap:16px}.ruler__tick{text-align:center}.ruler__tick .t{font-size:28px;font-weight:900;color:var(--duo-ink);letter-spacing:-.02em}.ruler__tick .lbl{color:var(--duo-gray);font-weight:700;font-size:13px;margin-top:4px}@media (max-width:720px){.ruler__inner{grid-template-columns:1fr 1fr}}