.learning-scene{position:relative;height:530px;isolation:isolate}.scene-topline{position:absolute;left:10px;right:0;top:5px;display:flex;justify-content:space-between;font-size:8px;letter-spacing:1px;color:var(--muted)}.scene-grid{position:absolute;inset:40px -12px 40px 0;background-image:radial-gradient(#bdc2be .7px,transparent .7px);background-size:18px 18px;mask-image:radial-gradient(ellipse,#000 40%,transparent 73%);z-index:-2}.scene-path{position:absolute;inset:20px 0 0;width:100%;height:95%;fill:var(--paper);stroke:#a4b2d3;stroke-width:1;z-index:-1}.scene-path path{stroke-dasharray:1100;stroke-dashoffset:0;transition:stroke-dashoffset 1.4s ease}.source-card{position:absolute;background:var(--panel);border:1px solid var(--line);box-shadow:0 12px 24px -18px #22303a65;width:170px;transition:transform 1.1s cubic-bezier(.2,.8,.2,1),opacity .8s;will-change:transform}.source-card>span,.source-card>small{display:block;font-size:8px;letter-spacing:.6px;color:var(--muted)}.source-card strong{display:block;font:20px/1.1 var(--read)}.source-a{left:2%;top:120px;padding:7px 7px 12px;transform:rotate(-12deg)}.source-a img{height:146px;object-fit:cover;width:100%;margin-bottom:12px}.source-a>span{font-size:7px;margin:0 5px 7px}.source-a strong{font-size:17px;margin:0 5px}.source-b{right:1%;top:85px;padding:20px 17px;transform:rotate(10deg)}.source-b p{font:23px/1.15 var(--read);margin:23px 0}.source-rule{height:1px;background:var(--line);margin-bottom:10px}.source-c{right:8%;top:270px;padding:16px 18px;transform:rotate(-5deg);background:var(--tint)}.source-c small{margin-top:15px;font-size:7px}.book-lines{font:68px/.8 var(--read);color:var(--blue);margin:17px 0}.course-sheet{position:absolute;left:21%;top:63px;width:66%;max-width:365px;background:var(--panel);border:1px solid var(--line);padding:23px 26px;box-shadow:0 25px 50px -30px #22303a75;transform:translateY(0) rotate(2deg);opacity:1;transition:transform 1s cubic-bezier(.2,.8,.2,1),opacity .65s}.sheet-label{display:flex;justify-content:space-between;color:var(--blue);font-size:8px;letter-spacing:1px}.course-sheet h2{font-size:34px;line-height:1.03;letter-spacing:-1px;margin:20px 0 9px}.course-sheet>p{font-size:9px;color:var(--muted);margin-bottom:22px}.course-row{display:flex;gap:13px;align-items:center;border-top:1px solid var(--line);padding:14px 0;font-size:12px;transition:transform .7s,opacity .7s}.course-row>span:first-child{font-size:9px;color:var(--muted)}.course-row small{display:block;font-size:8px;color:var(--muted);margin-top:3px}.row-mark{color:var(--blue);margin-left:auto}.sheet-footer{display:flex;justify-content:space-between;gap:12px;font-size:6px;letter-spacing:.5px;border-top:1px solid var(--line);padding-top:12px;color:var(--muted)}.next-lesson{display:flex;gap:17px;align-items:center;position:absolute;bottom:53px;left:28%;width:70%;max-width:330px;background:var(--blue);color:var(--button-text);padding:17px 20px;transform:rotate(-3deg);box-shadow:0 20px 30px -20px #1e3e9e70;transition:opacity .65s,transform .85s cubic-bezier(.2,.8,.2,1)}.next-icon{font-size:29px}.next-lesson small{display:block;font-size:7px;letter-spacing:1px;color:var(--button-text)}.next-lesson strong{display:block;font:23px var(--read);margin:5px 0}.next-lesson div>span{display:block;font-size:8px;color:var(--button-text)}.scene-caption{position:absolute;left:6%;right:0;bottom:4px;display:flex;justify-content:space-between;gap:15px;font-size:8px;color:var(--muted)}.scene-caption>span:last-child{font-size:6px;letter-spacing:.7px;white-space:nowrap}.learning-scene[data-hero-step="0"] .course-sheet{opacity:0;transform:translateY(35px) scale(.85) rotate(-6deg);pointer-events:none}.learning-scene[data-hero-step="0"] .scene-path path{stroke-dashoffset:1100}.learning-scene:not([data-hero-step="2"]) .next-lesson{opacity:0;transform:translateY(25px) rotate(2deg);pointer-events:none}.learning-scene:not([data-hero-step="0"]) .source-a{transform:translate(-10px,-30px) rotate(-15deg) scale(.83)}.learning-scene:not([data-hero-step="0"]) .source-b{transform:translate(18px,-22px) rotate(15deg) scale(.8);opacity:.7}.learning-scene:not([data-hero-step="0"]) .source-c{transform:translate(35px,20px) rotate(12deg) scale(.8)}.learning-scene[data-hero-step="0"] .course-row{transform:translateY(20px);opacity:0}.course-row:nth-of-type(2){transition-delay:.1s}.course-row:nth-of-type(3){transition-delay:.2s}.course-row:nth-of-type(4){transition-delay:.3s}.scene-controls{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:36px;padding:22px 0;border-block:1px solid var(--line)}.step-controls{display:flex;align-items:center;gap:20px}.step-controls button{background:transparent;border:0;padding:9px 0;font-size:12px;min-height:44px;color:var(--muted);transition:color .2s}.step-controls button span{font-size:9px;margin-right:8px}.step-controls button[aria-pressed="true"]{color:var(--blue)}.step-rule{width:50px;height:1px;background:var(--line)}.hero-playback{display:flex;gap:20px}.hero-playback button{font-size:10px;border:0;background:transparent;padding:10px 0;color:var(--muted);min-height:44px}.hero-playback button:hover{color:var(--blue)}.hero-playback button:disabled{cursor:default;opacity:.5}
.learning-scene{min-width:0}.scene-controls{margin-top:0}.hero-playback{display:flex;gap:20px}.hero-motion-off .learning-scene *{transition:none!important}.scene-path{stroke:var(--line)}.scene-grid{background-image:radial-gradient(var(--muted) .7px,transparent .7px)}.step-controls{flex-wrap:wrap}.scene-caption{font-size:9px}.scene-caption>span:last-child{font-size:8px}.next-lesson{color:var(--button-text)}
@media(max-width:1100px){.source-card{width:145px}.course-sheet{left:15%;width:75%;padding:22px}.course-sheet h2{font-size:31px}.next-lesson{left:20%;width:80%}.step-controls{gap:14px}.step-rule{width:25px}}
@media(max-width:800px){.learning-scene{width:100%;max-width:580px;margin:auto;height:530px}.source-card{width:170px}.course-sheet{left:20%;width:67%;padding:24px}.scene-controls{flex-wrap:wrap;gap:4px}.step-controls{gap:16px}.hero-playback{margin-left:auto}.scene-topline{left:0}.hero{row-gap:25px}}
@media(max-width:480px){.learning-scene{height:470px}.source-card{width:125px}.source-a{top:110px}.source-a img{height:120px}.source-b{padding:16px 12px;top:65px}.source-b p{font-size:21px}.source-c{top:270px;padding:14px}.course-sheet{left:14%;top:62px;width:80%;padding:21px 18px}.course-sheet h2{font-size:30px}.course-sheet>p{font-size:9px;margin-bottom:16px}.course-row{padding:12px 0;font-size:11px}.course-row small{font-size:8px}.next-lesson{left:13%;width:87%;bottom:35px;padding:15px}.next-lesson strong{font-size:22px}.scene-caption{left:0;font-size:8px;gap:8px}.scene-caption>span:last-child{font-size:6px}.scene-topline{font-size:6px}.step-controls{justify-content:space-between;width:100%;gap:6px}.step-controls button{font-size:10px}.step-controls button span{font-size:8px;margin-right:4px}.step-rule{width:13px}.hero-playback{margin-left:0}.scene-controls{padding:12px 0}.source-b{right:4%}.source-c{right:12%}}
.field-picker{padding-top:26px}.field-picker>div:first-child{display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap}.field-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 8px}.field-tabs button{background:transparent;color:var(--muted);border:1px solid var(--line);padding:10px 17px;min-height:44px;border-radius:3px;font:inherit;font-size:12px;cursor:pointer}.field-tabs button[aria-pressed=true]{background:var(--blue);border-color:var(--blue);color:var(--button-text)}.field-picker+#hero{padding-top:40px}.example-cover{height:120px;margin-bottom:12px;background:var(--tint);position:relative;overflow:hidden;padding:12px;color:var(--blue)}.example-cover>span{font-size:7px;line-height:1.6;letter-spacing:1px;display:block}.example-cover i{display:block;position:absolute;right:18px;bottom:15px;width:57px;height:60px;border:9px solid currentColor;border-radius:32px 32px 0 0}.example-cover b{position:absolute;bottom:12px;left:12px;font:30px var(--read);font-weight:400}[data-field=marketing] .example-cover i{border-radius:50%;width:57px;height:57px;border-width:12px}[data-field=doctors] .example-cover i{border-radius:28px 28px 28px 0;transform:rotate(-25deg)}[data-field=everyday] .example-cover i{border-radius:50%;border-width:2px;box-shadow:inset 13px 0 currentColor}[data-field=programming] .example-cover i{border-radius:0;transform:rotate(45deg);width:43px;height:43px;border-width:7px}.source-b p{font-size:21px;line-height:1.17;margin:18px 0}.source-c strong{font-size:18px;line-height:1.15}.course-sheet h2{font-size:31px;overflow-wrap:normal}.course-sheet>p{line-height:1.5}.next-lesson strong{font-size:21px}.course-row>div{min-width:0}.course-row small{line-height:1.45}.node{max-width:47%;white-space:normal;text-align:center}.source h4{overflow-wrap:break-word}.scene-heading h3{overflow-wrap:break-word}
@media(max-width:800px){.field-picker>div:first-child{display:block}.field-picker>div:first-child>.quiet{display:block;margin-top:6px}.field-tabs button{padding:9px 13px}.course-sheet h2{font-size:31px}}
@media(max-width:480px){.field-picker{padding-top:20px}.field-tabs{gap:6px}.field-tabs button{font-size:10px;padding:9px 11px}.source-a .example-cover{height:98px;padding:8px}.example-cover i{width:43px;height:48px;right:10px;border-width:7px}.example-cover>span{font-size:6px}.source-b p{font-size:18px}.source-c strong{font-size:16px}.course-sheet h2{font-size:26px}.course-sheet{top:55px}.course-sheet>p{margin-bottom:12px}.course-row{padding:10px 0}.source-a strong{font-size:15px}.next-lesson strong{font-size:20px}.next-lesson{bottom:27px}.book-lines{font-size:50px;margin:12px 0}.source-c{top:265px}.scene-edition{max-width:45%;text-align:right}}
.hero-demo{min-width:0}.hero-demo .field-picker{padding:0 0 12px}.field-label{font-size:9px;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}.hero-demo .field-tabs{gap:2px 14px;margin:5px 0 0;border-bottom:1px solid var(--line)}.hero-demo .field-tabs button{border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;color:var(--muted);padding:9px 0;min-height:40px;font-size:11px}.hero-demo .field-tabs button[aria-pressed=true]{color:var(--blue);background:transparent;border-bottom-color:var(--blue)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.hero{padding-block:36px 30px;row-gap:12px}.hero .scene-controls{padding-block:8px;margin-top:0}.journey.section{padding-top:42px}.hero-demo .learning-scene{height:495px}
@media(max-width:800px){.hero-demo{width:100%;max-width:580px;margin:auto}.hero{row-gap:24px;padding-block:36px 24px}.hero-demo .learning-scene{height:500px}.hero .scene-controls{margin-top:0}.journey.section{padding-top:36px}}
@media(max-width:480px){.hero-demo .field-tabs{column-gap:13px}.hero-demo .field-tabs button{font-size:10px;min-height:40px}.hero-demo .learning-scene{height:455px}.hero-demo .field-picker{padding-bottom:10px}.hero{padding-bottom:18px}.journey.section{padding-top:30px}}
@media(prefers-reduced-motion:reduce){.learning-scene *{transition:none!important}}