/* The story is a vector/CSS composition; it stays crisp at 1080p and above. */
.ss-theater{background:radial-gradient(ellipse at 75% 35%,#f7f7ee 0,transparent 48%),linear-gradient(130deg,#f1f6fa,#e0eaf2);border:1px solid #b3c7d7;border-radius:24px;box-shadow:inset 0 1px #fff,0 8px 0 #b7c9d8,0 35px 48px -26px #193d5c90;scroll-margin-top:16px;position:relative;--ss-green:#398d74;--ss-shadow:inset 0 1px #fff,0 6px 0 #b5c8d6,0 25px 32px -15px #25475d80}
.ss-topline{display:flex;justify-content:space-between;gap:16px;padding:25px 32px 0;align-items:center}.ss-topline strong{font-size:14px;color:#25475a}.ss-topline small{font-size:10px;color:#53697a}.ss-body{display:grid;grid-template-columns:minmax(250px,.72fr) minmax(0,1.28fr);align-items:center;padding:0 32px;gap:32px}.ss-story-copy{padding:25px 0;max-width:430px;min-width:0}.ss-scene-label{color:#387d66;font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:800;margin:0 0 16px}.ss-scene-title{font-size:clamp(28px,2.65vw,43px);font-weight:800;letter-spacing:-1px;line-height:1.18;margin:0 0 20px;color:#000;text-wrap:pretty}.ss-scene-description{font-size:16px;line-height:1.8;margin:0;color:#355266;min-height:86px}.ss-person-line{display:flex;align-items:center;gap:13px;margin-top:28px}.ss-person-line .ss-face{width:46px;height:46px;border-width:2px;box-shadow:0 3px #adbecc}.ss-person-line strong,.ss-person-line small{display:block}.ss-person-line strong{font-size:12px}.ss-person-line small{font-size:10px;color:#516b7c;margin-top:3px}
.ss-stage{position:relative;container-type:inline-size;min-width:0;height:auto;aspect-ratio:600/440;max-width:850px;width:100%;margin:auto;perspective:1100px}.ss-art{position:absolute;width:100%;height:100%;font-size:1cqw;transform-style:preserve-3d}.ss-art svg{width:24px;height:24px;width:4em;height:4em;flex:none}.ss-ground{position:absolute;left:12%;bottom:3%;width:77%;height:27%;border-radius:50%;background:radial-gradient(ellipse,#88a7bd5c,transparent 68%);transform:rotate(-6deg)}.ss-orbit{position:absolute;left:8%;top:8%;width:84%;height:82%;border:1px solid #bccfda80;border-radius:50%;transform:rotateX(57deg) rotate(-20deg)}.ss-face{display:block;aspect-ratio:1;border-radius:50%;background:url('assets/shared-record/portraits.png');background-size:400% 400%;background-position:var(--px) var(--py);border:4px solid #f3e5bd;box-shadow:inset 0 0 0 1px #fff,0 5px 0 #b79f70,0 22px 28px -13px #253e5a88;flex:none}.ss-world{position:absolute;inset:0;visibility:hidden;opacity:0;transform:translateY(16px) scale(.97);transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .45s,visibility .45s}.ss-teacher{position:absolute;top:21%;left:36%;width:29%;z-index:4;text-align:center}.ss-teacher strong{font-size:2.4em;display:block;margin-top:14px}.ss-paper{position:absolute;width:30%;padding:3em;border:1px solid #b9cbd8;border-radius:2em;background:linear-gradient(135deg,#f8f9f4,#eaf1f6);box-shadow:var(--ss-shadow);transform:rotate(var(--r));animation:ss-float 5s ease-in-out infinite alternate}.ss-paper svg{color:#3c7763}.ss-paper strong{display:block;font-size:2em;line-height:1.4;margin:1em 0}.ss-paper i,.ss-sheet>i{height:.65em;border-radius:2px;background:#c4d4df;width:90%;display:block;margin:.8em 0}.ss-paper i:last-child{width:62%}.ss-paper-a{left:4%;top:7%;--r:-11deg}.ss-paper-b{right:2%;top:8%;--r:9deg;animation-delay:-2s}.ss-paper-c{left:4%;top:49%;--r:-6deg;animation-delay:-3s}.ss-class{position:absolute;left:36%;right:0;bottom:7%;display:flex;gap:3%;z-index:5}.ss-class>div{width:23%;text-align:center}.ss-class .ss-face{border-color:#eaf1f6;box-shadow:0 4px #abc2d2,0 18px 20px -12px #31536c88;border-width:3px}.ss-class b{font-size:1.8em;display:block;margin-top:8px}
.ss-profile{position:absolute;left:30%;top:18%;width:48%;z-index:3;background:linear-gradient(135deg,#fafbf7,#eaf2f7);border:1px solid #b3c9d7;border-radius:2.2em;box-shadow:var(--ss-shadow);padding:3.5em;visibility:hidden;opacity:0;transform:translateY(40px) rotateY(-10deg) rotate(-4deg);transition:transform .85s cubic-bezier(.2,.8,.2,1),opacity .6s,visibility .6s,left .85s,top .85s}.ss-profile-head{display:flex;gap:2em;align-items:center}.ss-profile-head .ss-face{width:9em;height:9em;border-width:2px;box-shadow:0 3px #bda776}.ss-profile-head strong{font-size:3.3em;line-height:1.2}.ss-profile-head small{display:block;font-size:1.6em;line-height:1.5;margin-top:.4em;color:#466072}.ss-profile-list{margin-top:3em;border-top:1px solid #c8d7e0}.ss-profile-list>div{display:flex;align-items:center;gap:1.5em;border-bottom:1px solid #c8d7e0;padding:1.65em 0;font-size:2em;font-weight:700}.ss-profile-list svg{width:1.3em;height:1.3em;color:#3d8b6c}.ss-profile-foot{font-size:1.5em;color:#456273;margin-top:2em;line-height:1.5}.ss-source{position:absolute;width:29%;display:flex;align-items:center;gap:1.5em;padding:2.4em;background:#edf4f8;border:1px solid #abc1d2;border-radius:1.5em;box-shadow:var(--ss-shadow);z-index:4;transform:rotate(var(--r));animation:ss-float 4.5s ease-in-out infinite alternate}.ss-source strong{font-size:1.8em;line-height:1.5}.ss-source svg{color:#3c7e67}.ss-source-a{left:1%;top:9%;--r:-8deg}.ss-source-b{left:0;top:40%;--r:-4deg;animation-delay:-1.5s}.ss-source-c{right:0;bottom:5%;--r:5deg;animation-delay:-3s}.ss-review-note{position:absolute;left:0;top:8%;width:47%;padding:2.5em;border-radius:2em;border:1px solid #b6c9d5;background:#eaf2f7;box-shadow:var(--ss-shadow);z-index:5;display:flex;align-items:center;gap:2em;transform:rotate(-5deg)}.ss-review-note .ss-face{width:9em;height:9em;border-width:2px}.ss-review-note strong{display:block;font-size:2.1em;line-height:1.4}.ss-review-note small{display:block;font-size:1.6em;color:#426176;margin-top:.6em}.ss-approved{position:absolute;z-index:6;right:6%;bottom:13%;display:flex;gap:1.5em;align-items:center;background:#d7eadc;border:1px solid #78a68c;border-radius:2em;padding:2.7em;box-shadow:inset 0 1px #fff,0 6px #90b8a1,0 25px 30px -15px #2a5b4380;transform:rotate(4deg);animation:ss-approve 1.1s both}.ss-approved svg{color:#2d7253}.ss-approved strong{font-size:2.6em;line-height:1.3;color:#255139}
.ss-team{position:absolute;top:51%;width:20%;text-align:center;z-index:6}.ss-team .ss-face{border-width:3px;border-color:#d9e9e1;box-shadow:0 4px #93b29f,0 20px 25px -12px #244a5b77}.ss-team strong{display:block;font-size:2em;margin-top:1em;line-height:1.3}.ss-team small{font-size:1.4em;display:block;color:#486778;margin-top:.5em}.ss-team-left{left:3%}.ss-team-right{right:3%}.ss-share-note{position:absolute;bottom:2%;left:15%;width:70%;display:flex;gap:2em;align-items:center;justify-content:center;font-size:2em;color:#23553f;font-weight:700}.ss-share-note svg{width:1.4em;height:1.4em}.ss-paths{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.ss-path{fill:none;stroke:#65a18a;stroke-width:2.5;stroke-dasharray:7 8;opacity:0;animation:ss-travel 3s linear infinite;transition:opacity .5s}.ss-path-c{stroke:#b8a16b;stroke-width:3}
.ss-notebook{position:absolute;left:7%;top:11%;width:66%;padding:4.5em 4em 4em 7em;border:1px solid #c4c9b3;border-radius:2em;background:linear-gradient(120deg,#f9f4e6,#f3eedb);box-shadow:inset 0 1px #fff,0 6px #c9c1a7,0 28px 32px -16px #304a6380;transform:rotate(-5deg)}.ss-notebook:before{content:'';position:absolute;left:3.2em;top:0;bottom:0;border-left:1px solid #d8cfae}.ss-notebook>svg{color:#967532;margin-bottom:1em}.ss-notebook>strong{font-size:3.1em;line-height:1.25;display:block;margin-bottom:1em}.ss-notebook p{font-size:2em;line-height:1.6;border-bottom:1px solid #ddd4b9;margin:.6em 0;padding:.45em 0}.ss-notebook small{display:block;font-size:1.6em;line-height:1.5;color:#695e40;margin-top:1.5em}.ss-notes-person{position:absolute;right:1%;bottom:9%;width:24%;text-align:center;transform:rotate(5deg)}.ss-notes-person strong{font-size:2.4em;margin-top:1em;display:block}
.ss-sheet{position:absolute;z-index:4;border:1px solid #b7cad8;background:linear-gradient(135deg,#f8faf9,#e8f1f6);border-radius:2em;box-shadow:var(--ss-shadow);padding:3.5em;width:43%}.ss-sheet>svg{color:#357859;width:5em;height:5em;margin-bottom:1.5em}.ss-sheet>strong{display:block;font-size:3.1em;line-height:1.2;margin-bottom:.7em}.ss-sheet small{display:block;font-size:1.9em;line-height:1.6;color:#476375;margin-bottom:2em}.ss-lesson{left:4%;top:23%;transform:rotate(-8deg)}.ss-assignment{right:3%;top:35%;transform:rotate(6deg)}.ss-support{display:flex;align-items:center;gap:1em;font-size:1.9em;line-height:1.5;padding:.7em .8em;border-radius:.7em;background:#dcece4;color:#285b46;margin-top:.9em;font-weight:700}.ss-support svg{width:1.35em;height:1.35em}.ss-classroom-note{position:absolute;left:6%;right:6%;bottom:1%;display:flex;align-items:center;gap:1em;text-align:center;justify-content:center;font-size:1.9em;line-height:1.5;color:#395b6f}.ss-classroom-note svg{width:1.3em;height:1.3em;color:#398d74}.ss-teach-teacher{position:absolute;top:10%;left:34%;width:32%}.ss-teach-students{display:flex;position:absolute;left:7%;right:7%;bottom:23%;gap:7%;align-items:end}.ss-teach-students>div{width:20%;text-align:center}.ss-teach-students>div:nth-child(2),.ss-teach-students>div:nth-child(3){transform:translateY(24%)}.ss-teach-students .ss-face{border-color:#eaf1f7;border-width:3px;box-shadow:0 4px #aec7d6,0 20px 26px -15px #23496199}.ss-teach-students b{display:block;font-size:2em;margin-top:.8em}.ss-finish-note{display:flex;align-items:center;justify-content:center;gap:1.8em;position:absolute;left:10%;right:10%;bottom:1%;padding:2.4em;border-radius:2em;background:#deece2;border:1px solid #9bbea9;box-shadow:inset 0 1px #fff,0 5px #9fbead,0 18px 28px -18px #214b3f88}.ss-finish-note strong{font-size:3em;line-height:1.2;color:#25553f}.ss-finish-note svg{color:#398d74}
/* Choreography is driven by sentence timing, not independent looping slides. */
.ss-theater[data-scene=load] .ss-load,.ss-theater[data-scene=gather] .ss-gather,.ss-theater[data-scene=review] .ss-review,.ss-theater[data-scene=share] .ss-share,.ss-theater[data-scene=notes] .ss-notes,.ss-theater[data-scene=deliver] .ss-deliver,.ss-theater[data-scene=teach] .ss-teach{visibility:visible;opacity:1;transform:none}.ss-theater[data-scene=gather] .ss-profile,.ss-theater[data-scene=review] .ss-profile,.ss-theater[data-scene=share] .ss-profile,.ss-theater[data-scene=deliver] .ss-profile{visibility:visible;opacity:1;transform:rotateY(-7deg) rotate(-3deg)}.ss-theater[data-scene=share] .ss-profile{left:26%;top:5%;transform:scale(.83) rotate(0)}.ss-theater[data-scene=share] .ss-path-a,.ss-theater[data-scene=share] .ss-path-b,.ss-theater[data-scene=deliver] .ss-path-c{opacity:1}.ss-theater[data-scene=deliver] .ss-profile{left:27%;top:-21%;transform:scale(.49) rotate(-2deg)}.ss-theater[data-scene=deliver] .ss-profile-foot{visibility:hidden}.ss-theater:not([data-state=playing]) .ss-art *{animation-play-state:paused!important}
.ss-caption{font-size:14px;line-height:1.7;color:#27475b;text-align:center;margin:8px 32px 25px;min-height:48px;display:flex;align-items:center;justify-content:center}.ss-controls{display:flex;align-items:center;justify-content:flex-start;gap:10px;flex-wrap:wrap;padding:23px 32px 5px}.ss-controls button{min-height:44px;border:1px solid #adbfcd;background:#e8f0f6;color:#244054;border-radius:9px;padding:9px 16px;font-size:12px;font-weight:700;box-shadow:inset 0 1px #fff,0 3px #adbfce;transition:transform .2s,box-shadow .2s}.ss-controls .ss-gold{display:flex;align-items:center;gap:10px;background:linear-gradient(135deg,#f6d98b,var(--se-gold));border-color:#d0ae68;box-shadow:inset 0 1px #fff9,0 4px #b99b58,0 14px 20px -11px #36516c88;color:#162b3b;font-weight:800;font-size:13px}.ss-gold svg{width:17px;height:17px}.ss-controls button:hover{transform:translateY(-2px)}.ss-controls button:active{transform:translateY(3px);box-shadow:inset 0 2px 4px #24405722}.ss-duration{font-size:10px;color:#4a6477;margin-left:6px}.ss-seek-row{display:flex;gap:15px;align-items:center;padding:15px 32px 0}.ss-seek-row input{width:100%;accent-color:#398d74;cursor:pointer;height:20px}.ss-time{font-size:10px;font-variant-numeric:tabular-nums;white-space:nowrap;color:#3a586c}.ss-chapters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin:28px 0 0}.ss-chapters button{background:#e3edf4;border:1px solid #b4c9d8;border-radius:10px;box-shadow:inset 0 1px #fff9,0 4px #b1c7d6,0 15px 23px -15px #284e6988;color:#25475a;display:flex;align-items:center;justify-content:center;gap:9px;padding:13px 10px;font-size:12px;font-weight:700;transition:transform .2s,box-shadow .2s}.ss-chapters svg{width:19px;height:19px;color:#398d74;flex:none}.ss-chapters button[aria-current=true]{background:linear-gradient(120deg,#faf0d7,#f1e2bf);border-color:#c7a967;color:#182f40}.ss-chapters button:hover{transform:translateY(-3px);border-color:#5eab89}.ss-chapters button:active{transform:translateY(3px);box-shadow:0 1px #a7c1cf}.ss-demo-heading{margin:48px 0 24px;display:flex;gap:25px;align-items:center;justify-content:space-between}.ss-demo-heading h3{font-size:22px;font-weight:800;letter-spacing:-.4px;margin:0}.ss-demo-heading p{font-size:13px;color:#405d72;margin:0}.ss-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@keyframes ss-float{to{translate:0 -7px}}@keyframes ss-travel{to{stroke-dashoffset:-60}}@keyframes ss-approve{0%{scale:1.22}70%{scale:.98}100%{scale:1}}
@media(min-width:701px) and (max-width:1100px){.ss-topline{padding:22px 24px 0}.ss-body{grid-template-columns:minmax(190px,.7fr) minmax(0,1.3fr);padding:0 24px;gap:16px}.ss-story-copy{padding:23px 0}.ss-scene-title{font-size:27px}.ss-scene-description{font-size:13px;min-height:88px}.ss-person-line{margin-top:19px}.ss-controls{padding:22px 24px 5px}.ss-chapters{gap:9px}.ss-chapters button{font-size:10px;gap:7px;line-height:1.5}.ss-caption{font-size:12px;margin:6px 24px 22px;min-height:62px}}
@media(max-width:700px){.ss-theater{border-radius:18px}.ss-topline{display:block;padding:18px 17px 0}.ss-topline strong{font-size:12px}.ss-topline small{display:block;font-size:8px;margin-top:4px}.ss-controls{padding:18px 16px 0;gap:9px}.ss-controls .ss-gold{width:100%;justify-content:center;font-size:12px;padding:12px 9px}.ss-controls button{font-size:11px;padding:9px 12px}.ss-duration{font-size:9px;margin:4px 0 0;width:100%;text-align:center}.ss-body{display:flex;flex-direction:column;gap:0;padding:0 16px}.ss-story-copy{padding:22px 0 0;width:100%;max-width:none;min-height:178px}.ss-scene-label{font-size:9px;margin-bottom:8px}.ss-scene-title{font-size:25px;letter-spacing:-.6px;line-height:1.2;margin-bottom:12px}.ss-scene-description{font-size:12px;line-height:1.7;min-height:52px}.ss-person-line{display:none}.ss-stage{width:100%;aspect-ratio:600/540}.ss-art{top:5%;height:85%}.ss-stage .ss-face{border-width:2px}.ss-class b,.ss-team strong{font-size:2.4em}.ss-caption{font-size:12px;line-height:1.65;margin:0 17px 20px;min-height:80px}.ss-seek-row{padding:12px 17px 0;gap:10px}.ss-time{font-size:9px}.ss-chapters{grid-template-columns:1fr 1fr;gap:10px;margin-top:24px}.ss-chapters button{font-size:10px;min-height:52px;padding:10px 8px;gap:7px;line-height:1.5}.ss-chapters svg{width:17px;height:17px}.ss-demo-heading{display:block;margin:35px 0 22px}.ss-demo-heading h3{font-size:21px}.ss-demo-heading p{font-size:12px;margin-top:7px}.ss-profile{width:57%;left:26%;padding:4em}.ss-profile-head strong{font-size:3.7em}.ss-profile-head small{font-size:2em}.ss-profile-list>div{font-size:2.5em;padding:1.3em 0}.ss-profile-foot{font-size:2em}.ss-source{width:34%;padding:2.4em}.ss-source strong{font-size:2.5em}.ss-source-c{bottom:0}.ss-review-note{width:58%;left:0;top:4%}.ss-review-note strong{font-size:2.7em}.ss-review-note small{font-size:2em}.ss-approved{right:0;bottom:4%}.ss-approved strong{font-size:3.5em}.ss-theater[data-scene=share] .ss-profile{left:21%;top:0;transform:scale(.8)}.ss-team{top:55%;width:22%}.ss-team-left{left:0}.ss-team-right{right:0}.ss-team small{font-size:2em}.ss-share-note{left:3%;width:94%;font-size:2.5em;bottom:-2%}.ss-notebook{left:3%;width:76%;padding:5em 4em 4em 7em}.ss-notebook>strong{font-size:3.8em}.ss-notebook p{font-size:2.8em}.ss-notebook small{font-size:2.3em}.ss-notes-person{right:0;bottom:0}.ss-notes-person strong{font-size:3em}.ss-sheet{width:46%;padding:3.4em}.ss-sheet>strong{font-size:3.6em}.ss-sheet small{font-size:2.6em}.ss-lesson{left:0;top:24%}.ss-assignment{right:0;top:35%}.ss-support{font-size:2.5em;gap:.6em;padding:.6em}.ss-classroom-note{left:0;right:0;bottom:-3%;font-size:2.5em}.ss-theater[data-scene=deliver] .ss-profile{left:24%;top:-23%;transform:scale(.43) rotate(-2deg)}.ss-paper strong{font-size:2.6em}.ss-paper{padding:3em;width:32%}.ss-paper-b{right:0}.ss-teacher strong{font-size:3em}.ss-teach-students b{font-size:2.5em}.ss-finish-note strong{font-size:3.5em}}
@media(min-width:1500px){.ss-body{padding:0 44px;gap:50px}.ss-story-copy{max-width:500px}.ss-topline{padding-inline:44px}.ss-controls{padding-inline:44px}}
@media(prefers-reduced-motion:reduce){.ss-theater *{animation:none!important;transition:none!important}.ss-stage{perspective:none}}
/* Keep every paper fully opaque and inside the illustrated stage. */
.ss-art{transform-style:flat}.ss-profile-list>div{padding:.85em 0}.ss-profile-list{margin-top:2em}.ss-profile-foot{margin-top:1.5em}.ss-source-c{bottom:8%;right:-1%}
@media(max-width:700px){.ss-profile-list>div{padding:.8em 0}.ss-profile-foot{font-size:1.9em}.ss-source-c{bottom:1%;right:0}}
@media(max-width:700px){.ss-class{bottom:0}.ss-teacher strong{font-size:2.7em;margin-top:8px}.ss-class b{font-size:3em;margin-top:6px}.ss-paper strong{font-size:3.2em}.ss-paper{width:34%;padding:2.8em}.ss-paper-a{left:0}.ss-paper-c{left:0}.ss-profile-list>div{font-size:3.1em;padding:.6em 0}.ss-profile-head small{font-size:2.5em}.ss-profile-foot{font-size:2.3em}.ss-source strong{font-size:3em}.ss-source{padding:2em;gap:1em}.ss-source svg{width:3em}.ss-team strong{font-size:3em}.ss-team small{font-size:2.5em}.ss-share-note{font-size:3em}.ss-support{font-size:3em}.ss-classroom-note{font-size:2.8em}.ss-teach-students b{font-size:3em}.ss-notebook p{font-size:3em}}
@media(max-width:700px){.ss-source-c{bottom:-8%}.ss-theater[data-scene=review] .ss-profile{top:26%}.ss-review-note{top:3%}.ss-approved{bottom:-6%;right:0}.ss-theater[data-scene=review] .ss-stage{aspect-ratio:600/580}.ss-theater[data-scene=share] .ss-stage{aspect-ratio:600/580}.ss-theater[data-scene=deliver] .ss-stage{aspect-ratio:600/580}}
.ss-art .ss-paths{width:100%;height:100%}.ss-theater[data-scene=share] .ss-profile{transform:scale(.92)}
@media(min-width:701px) and (max-width:900px){.ss-body{grid-template-columns:1fr;gap:0}.ss-story-copy{max-width:none;padding:25px 0 0}.ss-scene-title{font-size:30px;margin-bottom:12px}.ss-scene-description{min-height:0;font-size:14px;max-width:580px}.ss-person-line{display:none}.ss-stage{max-width:570px}.ss-caption{margin-top:8px;min-height:60px}}
@media(max-width:700px){.ss-theater[data-scene=share] .ss-profile{transform:scale(.8)}}
/* Keep the product demos visually connected to the story, with a quieter scale. */
.ss-demo-heading{margin:34px 0 18px;gap:20px}.ss-demo-heading h3{font-size:20px}.ss-demo-heading p{font-size:12px}
@media(max-width:1100px) and (min-width:701px){.ss-demo-heading{margin-top:30px;margin-bottom:16px}.ss-demo-heading h3{font-size:19px}}
@media(max-width:700px){.ss-demo-heading{margin:27px 0 18px}.ss-demo-heading h3{font-size:19px}.ss-demo-heading p{font-size:12px;margin-top:5px}}