*{box-sizing:border-box}html{background:#fff}body{margin:0;font-family:var(--sans),sans-serif;-webkit-font-smoothing:antialiased;color:#11151c}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}h1,h2,p{margin:0}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.preview-header{height:78px;padding:0 4%;display:flex;align-items:center;justify-content:space-between;gap:22px;background:#fff}.preview-brand{display:flex;align-items:center;gap:16px}.preview-brand img{width:110px;height:auto}.preview-brand>span{font-size:17px;font-weight:800;letter-spacing:-.06em}.preview-header nav{display:flex;align-items:center;gap:30px}.preview-header nav a{font-size:12px;color:#8d929b;display:flex;gap:10px;align-items:center;padding:12px 0}.preview-header nav a[aria-current]{color:#14191f;font-weight:700}.preview-header nav a[aria-current]:before{content:'';width:5px;height:5px;border-radius:50%;background:#2859f5}.preview-header nav a:focus-visible,button:focus-visible{outline:2px solid #2859f5;outline-offset:5px}
.motion-stage{--reel-height:310px;--fg:#15191e;--muted:#7d8591;--accent:#2859f5;position:relative;height:calc(100svh - 176px);min-height:580px;max-height:930px;isolation:isolate;overflow:hidden;background:#f3f5f8;color:var(--fg)}
.stage-top{position:absolute;top:48px;left:5%;right:5%;z-index:4;display:flex;justify-content:space-between;align-items:flex-start;gap:20px;transition:opacity .8s}.eyebrow{font-size:9px;letter-spacing:.13em;font-weight:500;color:var(--muted)}.stage-top h1{font-size:clamp(20px,2.1vw,32px);font-weight:600;letter-spacing:-.055em;margin-top:15px;line-height:1.3}.stage-edition{font-size:8px;letter-spacing:.12em;color:var(--muted);padding-top:3px}
.stage-atmosphere{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;transition:opacity 1s}.stage-atmosphere b{position:absolute;left:43%;top:-27%;font-size:1000px;line-height:1;color:#e8ecf2;font-weight:400;letter-spacing:-.15em;opacity:.38}.stage-atmosphere i{position:absolute;width:80%;height:90%;border-radius:50%;background:#ffffff9c;filter:blur(70px);left:-50%;top:15%}.stage-atmosphere i:nth-child(2){display:none}
.reels{position:absolute;left:7%;right:7%;top:50%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6%;transform:translateY(-42%);transition:opacity .65s,filter .65s;z-index:2}.reel-window{height:var(--reel-height);overflow:hidden;mask-image:linear-gradient(transparent,#000 20%,#000 79%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 20%,#000 79%,transparent)}.reel-strip{transform:translate3d(0,calc(var(--row,0) * var(--reel-height) * -1),0);transition:transform 1.15s cubic-bezier(.62,0,.16,1);transition-delay:calc(var(--column) * 65ms);will-change:transform}.student{height:var(--reel-height);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;position:relative}.student-school{font-size:clamp(14px,1.55vw,23px);font-weight:500;line-height:1.6;color:var(--muted);letter-spacing:-.045em}.student-name{font-size:clamp(44px,7.8vw,120px);font-weight:650;line-height:1.2;letter-spacing:-.075em;color:var(--fg);margin-top:10px;white-space:nowrap}.student-result{font-size:clamp(18px,2.3vw,33px);font-weight:600;color:var(--accent);letter-spacing:-.055em;margin-top:13px;line-height:1.3}.student-year{font-size:10px;letter-spacing:.09em;color:var(--muted);margin-top:22px}
.stage-footer{position:absolute;left:5%;right:5%;bottom:34px;display:flex;align-items:center;gap:25px;font-size:9px;letter-spacing:.06em;color:var(--muted);z-index:5;transition:color 1s}.stage-footer>span:last-child{min-width:70px;text-align:right}.sequence-label{min-width:137px}.sequence-progress{height:2px;flex:1;background:color-mix(in srgb,var(--muted) 15%,transparent);overflow:hidden}.sequence-progress i{display:block;width:100%;height:100%;background:var(--accent);transform:scaleX(var(--cycle-progress,0));transform-origin:left}
.brand-frame{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;opacity:0;pointer-events:none;transition:opacity .5s;z-index:3}.brand-frame>p{font-size:15px;letter-spacing:-.03em;color:var(--muted);margin-bottom:23px}.brand-frame h2{font-size:clamp(52px,8.9vw,142px);font-weight:500;letter-spacing:-.085em;line-height:1.3;color:var(--fg);display:flex;gap:.18em}.brand-frame h2 strong{color:var(--accent);font-weight:650}.brand-frame>small{font-size:13px;letter-spacing:-.035em;color:var(--muted);margin-top:28px}.motion-stage[data-phase=brand] .brand-frame{opacity:1}.motion-stage[data-phase=brand] .brand-frame h2>span{animation:phraseAppear 1.3s .05s both}.motion-stage[data-phase=brand] .brand-frame h2>strong{animation:phraseAppear 1.3s .35s both}.motion-stage[data-phase=brand] .brand-frame>p,.motion-stage[data-phase=brand] .brand-frame>small{animation:phraseAppear 1.1s .15s both}.motion-stage:not([data-phase=students]) .reels{opacity:0;filter:blur(7px);pointer-events:none}.motion-stage:not([data-phase=students]) .stage-top{opacity:0}
.next-reveal{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;flex-direction:column;clip-path:inset(0 50%);background:#2859f5;color:#fff;pointer-events:none;overflow:hidden;transition:clip-path 1.25s cubic-bezier(.76,0,.24,1)}.motion-stage[data-phase=next] .next-reveal{clip-path:inset(0)}.next-reveal>p{font-size:15px;letter-spacing:-.035em;margin-bottom:20px;opacity:.7}.next-reveal h2{font-size:clamp(85px,16vw,240px);font-weight:500;letter-spacing:-.065em;line-height:.85;display:flex;flex-direction:column;position:relative;z-index:1}.next-reveal h2>span{font-size:.27em;font-weight:400;letter-spacing:-.045em;line-height:1.4;margin-left:.05em}.next-reveal h2>strong{font-weight:650;letter-spacing:-.065em;line-height:1.03}.next-mark{font-weight:350}.next-sign{font-size:9px;letter-spacing:.12em;opacity:.6;margin-top:30px}.motion-stage[data-phase=next] .next-reveal h2,.motion-stage[data-phase=next] .next-reveal>p{animation:wideRevealText 1.4s .3s both}.next-atmosphere{position:absolute;inset:0;overflow:hidden;pointer-events:none}.next-atmosphere i{position:absolute;inset:-20%;border-radius:45%;background:#ffffff08;transform:rotate(-20deg) translateX(-50%);animation:ambientDrift 12s ease-in-out infinite}.next-atmosphere i:nth-child(2){inset:-60% -5% -60% 70%;background:#00000012;animation-delay:-4s}.next-atmosphere i:nth-child(3){inset:-40% 60% -40% -10%;background:#ffffff08;animation-delay:-8s}.motion-stage[data-phase=next] .stage-footer{color:#ffffff9c}.motion-stage[data-phase=next]{--accent:#ffffff}
.resetting .reel-strip{transition:none!important}.resetting .next-reveal{transition:none!important}.is-paused *{animation-play-state:paused!important}
.preview-controls{display:flex;align-items:center;justify-content:space-between;padding:23px 4% 0;gap:20px;background:#fff}.preview-controls>p{display:flex;align-items:center;gap:25px}.preview-controls b{font-size:12px;font-weight:650}.preview-controls p>span{font-size:11px;color:#959ba5}.preview-controls>div{display:flex;align-items:center;gap:24px}.preview-controls button{border:0;background:none;padding:8px 0;font-size:11px;color:#5b626d;white-space:nowrap}.source-note{font-size:9px;color:#a0a6af;padding:15px 4% 21px;line-height:1.8}
/* 02: cobalt, bold names and an open stage with architectural light. */
body[data-design="2"] .motion-stage{background:#2453ee;--fg:#fff;--muted:#cad5ff;--accent:#fff}
body[data-design="2"] .stage-top h1{font-weight:750}body[data-design="2"] .stage-atmosphere b{font-size:1050px;left:-2%;top:-56%;color:#ffffff09;opacity:1;font-weight:800}body[data-design="2"] .stage-atmosphere i{border-radius:0;background:#1737a533;filter:none;width:80%;height:200%;left:70%;top:-50%;transform:rotate(32deg);animation:planeDrift 15s ease-in-out infinite}body[data-design="2"] .stage-atmosphere i:nth-child(2){display:block;left:84%;background:#ffffff09;animation-delay:-7s}
body[data-design="2"] .reels{left:6%;right:6%;gap:4%}body[data-design="2"] .student{align-items:center}body[data-design="2"] .student-name{font-weight:800;letter-spacing:-.09em;font-size:clamp(44px,8.3vw,128px)}body[data-design="2"] .student-school{color:#ced9ff}body[data-design="2"] .student-result{font-size:clamp(17px,2vw,29px);font-weight:550}body[data-design="2"] .student-year{opacity:.65}body[data-design="2"] .brand-frame h2{font-weight:700}body[data-design="2"] .brand-frame h2 strong{color:#d5e1ff;font-weight:450}body[data-design="2"] .next-reveal{background:#eef2fa;color:#1d48d5}body[data-design="2"] .next-reveal h2{font-size:clamp(90px,18vw,270px);letter-spacing:-.085em}body[data-design="2"] .next-atmosphere i{background:#2859f508}body[data-design="2"] .motion-stage[data-phase=next]{--accent:#2859f5}body[data-design="2"] .motion-stage[data-phase=next] .stage-footer{color:#6f7f9c}
/* 03: ink and silver, quiet typography with a moving field of light. */
body[data-design="3"] .motion-stage{background:#101318;--fg:#edf0f5;--muted:#85909f;--accent:#c2cddd}body[data-design="3"] .stage-atmosphere b{left:-7%;top:16%;font-size:550px;font-weight:300;color:transparent;-webkit-text-stroke:1px #ffffff0c;opacity:1;transform:rotate(-15deg)}body[data-design="3"] .stage-atmosphere i{width:110%;height:150%;left:10%;top:-100%;background:#7f94ad19;filter:blur(80px);animation:ambientDrift 16s ease-in-out infinite}body[data-design="3"] .stage-atmosphere i:nth-child(2){display:block;left:25%;top:35%;background:#728fa510;animation-delay:-8s}body[data-design="3"] .reels{left:8%;right:8%;gap:7%}body[data-design="3"] .student-name{font-weight:450;letter-spacing:-.08em;font-size:clamp(44px,7.8vw,120px);background:linear-gradient(130deg,#fff 5%,#b7c2d1 55%,#fff);background-clip:text;-webkit-background-clip:text;color:transparent}body[data-design="3"] .student-result{font-size:clamp(17px,2.2vw,31px);font-weight:450;color:#bdc9db}body[data-design="3"] .student-year{letter-spacing:.16em}body[data-design="3"] .brand-frame h2{font-weight:350}body[data-design="3"] .brand-frame h2 strong{color:#fff;font-weight:600}body[data-design="3"] .next-reveal{background:#dce3ec;color:#161d28}body[data-design="3"] .next-reveal h2>strong{font-weight:400}body[data-design="3"] .next-atmosphere i{background:#91a5bf19}body[data-design="3"] .motion-stage[data-phase=next]{--accent:#485e7c}body[data-design="3"] .motion-stage[data-phase=next] .stage-footer{color:#5f6e81}
@keyframes phraseAppear{from{opacity:0;filter:blur(8px);transform:translateY(15px)}to{opacity:1;filter:blur(0);transform:translateY(0)}}@keyframes wideRevealText{from{opacity:0;transform:scale(1.045) translateY(18px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes ambientDrift{0%,100%{transform:rotate(-20deg) translateX(-35%)}50%{transform:rotate(-10deg) translateX(-5%)}}@keyframes planeDrift{0%,100%{transform:rotate(32deg) translateX(0)}50%{transform:rotate(32deg) translateX(-10%)}}
@media(max-width:900px){.preview-header{padding:0 24px}.preview-header nav{gap:20px}.preview-header nav a{gap:7px}.preview-brand img{width:85px}.preview-brand>span{font-size:15px}.preview-controls{align-items:flex-start;gap:20px}.preview-controls>p{align-items:flex-start;flex-direction:column;gap:8px}.preview-controls p>span{font-size:9px}.preview-controls>div{gap:17px}.preview-controls button{font-size:10px}.motion-stage{min-height:570px}.stage-edition{font-size:7px}}
@media(max-width:600px){.preview-header{height:106px;padding:14px 20px;display:block}.preview-brand{gap:13px;justify-content:space-between}.preview-brand img{width:89px}.preview-header nav{justify-content:space-between;margin-top:15px;gap:10px}.preview-header nav a{font-size:10px;gap:7px;padding:3px 0}.preview-header nav a[aria-current]:before{width:4px;height:4px}.motion-stage{height:calc(100svh - 240px);min-height:525px;--reel-height:270px}.stage-top{left:6%;right:6%;top:30px;display:block}.stage-top h1{font-size:24px;line-height:1.4;margin-top:15px;max-width:225px}.eyebrow{font-size:7px;letter-spacing:.09em}.stage-edition{display:block;font-size:7px;letter-spacing:.07em;margin-top:15px}.reels,body[data-design="2"] .reels,body[data-design="3"] .reels{left:6%;right:6%;gap:4%;transform:translateY(-30%)}.student-school{font-size:10px;letter-spacing:-.06em;line-height:1.6;white-space:nowrap}.student-name,body[data-design="2"] .student-name,body[data-design="3"] .student-name{font-size:clamp(31px,9.1vw,53px);letter-spacing:-.09em;line-height:1.3;margin-top:14px}.student-result,body[data-design="2"] .student-result,body[data-design="3"] .student-result{font-size:14px;margin-top:13px;font-weight:500}.student-year{font-size:8px;margin-top:19px}.stage-footer{left:6%;right:6%;bottom:25px;gap:13px;font-size:7px}.sequence-label{min-width:95px}.stage-footer>span:last-child{min-width:55px}.stage-atmosphere b{font-size:750px;left:5%;top:-6%}.brand-frame h2{font-size:clamp(38px,10vw,60px);gap:.15em}.brand-frame>p{font-size:12px;margin-bottom:20px}.brand-frame>small{font-size:11px;margin-top:24px}.next-reveal h2,body[data-design="2"] .next-reveal h2{font-size:clamp(110px,31vw,180px)}.next-reveal>p{font-size:12px}.next-sign{font-size:7px;margin-top:28px}.preview-controls{padding:18px 6% 0;display:block}.preview-controls>p{flex-direction:row;justify-content:space-between;align-items:baseline;gap:14px}.preview-controls b{font-size:11px;white-space:nowrap}.preview-controls p>span{font-size:8px;line-height:1.6;max-width:215px;text-align:right}.preview-controls>div{display:flex;justify-content:space-between;gap:10px;margin-top:15px}.preview-controls button{font-size:10px}.source-note{font-size:8px;padding:14px 6% 20px}body[data-design="3"] .stage-atmosphere b{font-size:550px;left:-40%;top:36%}}
@media(prefers-reduced-motion:reduce){.stage-atmosphere i,.next-atmosphere i{animation:none}.reel-strip{transition-duration:.3s}.next-reveal{transition-duration:.4s}.brand-frame *,.next-reveal h2,.next-reveal>p{animation-duration:.4s!important}}
body[data-design="3"] .student{align-items:center}body[data-design="3"] .student-result{order:1;font-size:20px;letter-spacing:.02em;margin:0 0 12px;color:#8c9db5}body[data-design="3"] .student-name{order:2;margin:0;font-weight:400}body[data-design="3"] .student-school{order:3;margin-top:17px;font-size:18px;color:#c2c9d3}body[data-design="3"] .student-year{order:4;margin-top:13px;font-size:9px}
@media(max-width:600px){body[data-design="3"] .student-result{font-size:12px;margin-bottom:14px}body[data-design="3"] .student-school{font-size:10px;margin-top:17px}body[data-design="3"] .student-year{font-size:8px;margin-top:13px}}
.is-paused .reel-strip,.is-paused .next-reveal{transition:none}.is-paused .brand-frame h2>span,.is-paused .brand-frame h2>strong,.is-paused .brand-frame>p,.is-paused .brand-frame>small,.is-paused .next-reveal h2,.is-paused .next-reveal>p{animation:none!important;opacity:1;transform:none;filter:none}
/* Three readable rows, one row of movement per step. */
.motion-stage{--reel-height:clamp(136px,calc((100svh - 356px) / 3),200px);min-height:600px}
.stage-top{top:30px}
.reels,body[data-design="2"] .reels,body[data-design="3"] .reels{top:118px;transform:none}
.reel-window{height:calc(var(--reel-height) * 3);mask-image:linear-gradient(transparent,#000 2%,#000 98%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 2%,#000 98%,transparent)}
.reel-strip{transition-delay:0ms;transition-duration:var(--reel-duration,1150ms)}
.student-school{font-size:14px;line-height:1.4}
.student-name,body[data-design="2"] .student-name,body[data-design="3"] .student-name{font-size:clamp(40px,min(5.5vw,8vh),76px);line-height:1.05;margin-top:6px}
.student-result,body[data-design="2"] .student-result{font-size:18px;line-height:1.2;margin-top:7px}
.student-year{font-size:8px;line-height:1.2;margin-top:7px}
body[data-design="3"] .student-result{font-size:14px;margin:0 0 8px}
body[data-design="3"] .student-name{margin-top:0}
body[data-design="3"] .student-school{font-size:15px;margin-top:8px}
body[data-design="3"] .student-year{font-size:8px;margin-top:7px}
@media(min-height:1000px) and (min-width:901px){.reels,body[data-design="2"] .reels,body[data-design="3"] .reels{top:145px}}
@media(max-width:900px){.student-name,body[data-design="2"] .student-name,body[data-design="3"] .student-name{font-size:clamp(38px,min(6.5vw,8vh),66px)}}
@media(max-width:600px){
 .motion-stage{--reel-height:clamp(125px,calc((100svh - 300px) / 3),156px);min-height:550px;height:calc(100svh - 190px)}
 .stage-top{top:24px}.stage-top h1{font-size:23px;margin-top:11px}.stage-edition{margin-top:10px}
 .reels,body[data-design="2"] .reels,body[data-design="3"] .reels{top:125px}
 .student-school{font-size:10px;line-height:1.4}
 .student-name,body[data-design="2"] .student-name,body[data-design="3"] .student-name{font-size:clamp(31px,9.1vw,48px);line-height:1.1;margin-top:7px}
 .student-result,body[data-design="2"] .student-result{font-size:13px;line-height:1.2;margin-top:8px}
 .student-year{font-size:7px;margin-top:8px}
 body[data-design="3"] .student-result{font-size:11px;margin-bottom:8px}
 body[data-design="3"] .student-name{margin-top:0}
 body[data-design="3"] .student-school{font-size:10px;margin-top:8px}
 body[data-design="3"] .student-year{font-size:7px;margin-top:8px}
 .stage-footer{bottom:23px}
}

/* White edition: school, student, result and year carry equal visual weight. */
body[data-design="1"] .student{--record-type:clamp(20px,1.8vw,26px);gap:3px}
body[data-design="1"] .student-school,
body[data-design="1"] .student-name,
body[data-design="1"] .student-result,
body[data-design="1"] .student-year{font-size:var(--record-type);line-height:1.2;letter-spacing:-.04em;margin:0}
body[data-design="1"] .student-name{font-weight:600}
body[data-design="1"] .student-school{font-weight:500;color:#56606e}
body[data-design="1"] .student-year{font-weight:450;color:#687382;font-variant-numeric:tabular-nums}
.motion-stage.is-offscreen *{animation-play-state:paused!important}
@media(max-width:600px){body[data-design="1"] .student{--record-type:clamp(14px,3.85vw,16px)}}
@media(prefers-reduced-motion:reduce){.reel-strip{transition-duration:.3s}}
.student-summary{display:flex;align-items:baseline;gap:.45em;white-space:nowrap}.student-summary .student-name,.student-summary .student-result{margin:0!important}.student{gap:6px}.student-year{order:0}.student-school{order:1}.student-summary{order:2;transform:scale(var(--pulse-scale,1));transform-origin:left center}.student-name{font-size:inherit}.student-result{font-size:inherit}.student-year{margin:0 0 3px!important}body[data-motion="continuous"] .reel-strip{transition:none!important}.motion-mode-links{padding:12px 4% 0;display:flex;gap:24px;font-size:12px;color:#2859f5}body[data-design="3"] .student-summary{transform-origin:center}body[data-design="3"] .student-result{order:1}body[data-design="1"] .student-summary{font-size:var(--record-type)}@media(max-width:600px){body[data-design="1"] .student{--record-type:clamp(12px,3.4vw,14px)}.student-summary{gap:.3em}}

body[data-motion=pulse] .student{transform:scale(var(--pulse-scale,1));transform-origin:left center}body[data-motion=pulse] .student-summary{transform:none}body[data-embed=true] .preview-header,body[data-embed=true] .motion-mode-links,body[data-embed=true] .preview-controls>p,body[data-embed=true] .source-note{display:none}body[data-embed=true] .motion-stage{height:600px;min-height:600px}body[data-embed=true] .preview-controls{padding:5px 4%}body[data-embed=true] .preview-controls>div{margin-left:auto}@media(max-width:600px){body[data-embed=true] .motion-stage{height:620px;min-height:620px;--reel-height:145px}}
.preview-header{display:none}.motion-stage{height:600px;min-height:600px}.preview-controls{padding:8px 5%}.preview-controls>p,.source-note{display:none}.preview-controls>div{margin-left:auto}.stage-top{top:24px}.reels{top:110px}@media(max-width:600px){.motion-stage{height:620px;min-height:620px;--reel-height:145px}.reels{top:120px}.stage-top h1{font-size:22px}}
.motion-mode-links{display:none}
/* The embedded reel keeps 3 columns, 3 visible rows and 3 lines per student. */
.stage-edition{display:none}
.preview-controls button{min-height:44px;font-size:12px}
@media(max-width:700px){
 .motion-stage{height:500px;min-height:500px;max-height:none;--reel-height:112px}
 .stage-top{left:5%;right:5%;top:22px}.stage-top h1{font-size:clamp(21px,5.65vw,25px);max-width:none;margin-top:10px;line-height:1.35}.eyebrow{font-size:9px;letter-spacing:.05em}
 .reels,body[data-design="2"] .reels,body[data-design="3"] .reels{left:4%;right:4%;top:100px;gap:2%}
 body[data-design="1"] .student{--record-type:clamp(12px,3.65vw,15px);gap:5px}
 body[data-design="1"] .student-school{color:#465263}body[data-design="1"] .student-year{color:#596678}
 .student-summary{gap:.18em}.student-school{white-space:nowrap}.stage-footer{bottom:20px;font-size:9px;gap:12px}.sequence-label{min-width:110px}
 .preview-controls{padding:0 4% 8px}.preview-controls>div{gap:14px;margin-top:4px}.preview-controls button{font-size:11px;min-height:44px}
 .brand-frame h2{font-size:clamp(35px,9.5vw,54px)}
}
/* Final D: four students per row, newest first, three visible rows. */
.preview-header,.preview-controls,.motion-mode-links{display:none!important}
.sr-only{top:0;left:0}
.reels,body[data-design="1"] .reels{grid-template-columns:repeat(4,minmax(0,1fr));left:5%;right:5%;gap:3%;top:110px}
body[data-design="1"] .student{--record-type:clamp(18px,1.8vw,26px);gap:6px;min-width:0}
body[data-design="1"] .student-school,body[data-design="1"] .student-name,body[data-design="1"] .student-result,body[data-design="1"] .student-year{font-size:var(--record-type);line-height:1.25;letter-spacing:-.045em;margin:0}
body[data-design="1"] .student-school{color:#465263;white-space:nowrap}
body[data-design="1"] .student-year{color:#596678;letter-spacing:-.025em}
.student-summary{gap:.27em;transform:none}
.student-result-compact{display:none}
.reel-window{mask-image:linear-gradient(transparent,#000 2%,#000 98%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 2%,#000 98%,transparent)}

/* Every ending phase and its reveal now takes one third of the former time. */
.stage-top{transition-duration:266.667ms}
.stage-atmosphere,.stage-footer{transition-duration:333.333ms}
.reels{transition:opacity 216.667ms,filter 216.667ms}
.brand-frame{transition-duration:166.667ms}
.motion-stage[data-phase="brand"] .brand-frame h2>span{animation:phraseAppear 433.333ms 16.667ms both}
.motion-stage[data-phase="brand"] .brand-frame h2>strong{animation:phraseAppear 433.333ms 116.667ms both}
.motion-stage[data-phase="brand"] .brand-frame>p,.motion-stage[data-phase="brand"] .brand-frame>small{animation:phraseAppear 366.667ms 50ms both}
.next-reveal{transition-duration:416.667ms}
.motion-stage[data-phase="next"] .next-reveal h2,.motion-stage[data-phase="next"] .next-reveal>p{animation:wideRevealText 466.667ms 100ms both}
.next-atmosphere i{animation-duration:4s}
.next-atmosphere i:nth-child(2){animation-delay:-1.333s}
.next-atmosphere i:nth-child(3){animation-delay:-2.667s}

@media(max-width:900px){
 body[data-design="1"] .student{--record-type:clamp(15px,2.05vw,19px)}
 .reels,body[data-design="1"] .reels{gap:2%}
}
@media(max-width:700px){
 .reels,body[data-design="1"] .reels{left:4%;right:4%;gap:2%;top:100px}
 body[data-design="1"] .student{--record-type:clamp(14px,3.7vw,18px);gap:5px}
 .student-summary{gap:.18em}
 .student-result-full,.student-grade-unit{display:none}
 .student-result-compact{display:inline}
 .stage-footer{font-size:8px;gap:8px}
 .sequence-label{min-width:102px}
}
@media(max-width:350px){
 .reels,body[data-design="1"] .reels{left:3%;right:3%;gap:1.5%}
 body[data-design="1"] .student{--record-type:14px;gap:5px}
}
@media(prefers-reduced-motion:reduce){
 .motion-stage .reels,.motion-stage .brand-frame,.motion-stage .next-reveal,.motion-stage .stage-top,.motion-stage .stage-atmosphere,.motion-stage .stage-footer{transition:none!important}
 .motion-stage *{animation:none!important}
 .reels{max-height:calc(var(--reel-height) * 3);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
 .reel-window{height:auto;overflow:visible;mask-image:none;-webkit-mask-image:none}
 .reel-strip{transform:none!important}
 .student[data-clone="true"]{display:none}
 .stage-footer{display:none}
}

/* Navy preview: give the school its own stronger, readable line. */
body[data-design="1"] .student-school{font-weight:700;color:#202b3c;line-height:1.35}
body[data-design="1"] .student-school-name{font-size:1.08em;letter-spacing:-.045em}
body[data-design="1"] .student-grade,body[data-design="1"] .student-grade-unit{font-size:.76em;font-weight:500;color:#536177;letter-spacing:-.035em}
body[data-design="1"] .student-school-name+.student-grade{margin-left:.13em}
@media(max-width:700px){
 body[data-design="1"] .student-school-name{font-size:clamp(14.5px,4vw,18px);letter-spacing:-.055em}
 body[data-design="1"] .student-grade{font-size:11px}
 body[data-design="1"] .student-school-name+.student-grade{margin-left:1px}
}

/* Keep the exam label on the year line, preserving three lines per student. */
body[data-design="1"] .student-year{display:flex;align-items:baseline;white-space:nowrap}
body[data-design="1"] .student-exam{font-size:clamp(9px,.83vw,12px);font-weight:500;letter-spacing:-.045em;line-height:1;margin-left:.45em;color:#536177}
@media(max-width:700px){body[data-design="1"] .student-exam{font-size:8px;letter-spacing:-.07em;margin-left:3px}}