{"version":3,"file":"FoilCard.Jccn4eZp.mjs","names":["React.useRef","React.useMemo","useRef","useCallback","_Fragment"],"sources":["https:/framerusercontent.com/modules/Q4D2ObxSe1YswriUHW0h/ZqWl4m3OhGNUMgPvPLGU/PearsonWave.js","https:/framerusercontent.com/modules/FLCdAaN7a8w5U5QJyuEt/WqPvx9tl7izwlav3QIes/PearsonComponents.js","https:/framerusercontent.com/modules/G3l66uVwxhfAmEaXLsqz/iNKGPRqTAZrvh5cLJFh1/FoilCard.js"],"sourcesContent":["import{jsx as _jsx}from\"react/jsx-runtime\";import*as React from\"react\";const PERIOD=9e3/* ms for the stack to advance one spacing step: slow and calm */;const PERIOD_HERO=2e3/* ms: the hero video loops at exactly 2.0s (48 frames at 24fps) */;const FADE=400;const DPR_MAX=1.5;const MAX_PIXELS=32e5;/* colours: field measured from the reference video (#0d0042); the arc and glow hues are the video's peak and glow, nudged to the toolkit's lilac and fuchsia */const COL={dark:{field:[13,0,66],glow:[74,42,160],core:[192,110,226]},light:{field:[232,230,243],glow:[190,168,240],core:[137,104,222]}};const hex=c=>`rgb(${c[0]}, ${c[1]}, ${c[2]})`;const VERT=`attribute vec2 a; void main(){ gl_Position = vec4(a, 0.0, 1.0); }`;const FRAG=`\n#extension GL_OES_standard_derivatives : enable\nprecision highp float;\nuniform vec2 uRes; uniform float uPh; uniform float uInt;\nuniform vec3 uField; uniform vec3 uGlow; uniform vec3 uCore; uniform float uDark;\nfloat hash(vec2 p){ return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453); }\nvoid main(){\n float asp = uRes.x / uRes.y;\n vec2 p = gl_FragCoord.xy / uRes.y;\n /* tangent point of every circle: just inside the left edge, mid height */\n vec2 q = p - vec2(0.045 * asp, 0.5);\n float dx = max(q.x, 0.0004);\n /* the circle through q that touches the tangent point (centre on the x axis) has radius r = |q|^2 / (2 dx) */\n float r = dot(q, q) / (2.0 * dx);\n float s = log(r + 1e-4) / log(1.36);\n float d = fract(uPh - s); /* 0 at an arc's leading edge, growing toward its trailing side */\n float w = max(fwidth(s), 1e-4);\n float dpx = d / w; /* distance behind the edge in pixels */\n float edge = smoothstep(0.0, 1.6, dpx); /* crisp leading edge, antialiased */\n float core = exp(-dpx / 2.6) * edge;\n float glow = exp(-d * 4.4) * edge * smoothstep(0.995, 0.9, d + 0.0);\n /* arcs fade in off the tangent point and dissolve toward the far side */\n float amp = smoothstep(0.035, 0.22, r) * exp(-r * 0.85) * smoothstep(0.0, 0.02, q.x);\n float gI = glow * amp * uInt;\n float cI = core * amp * uInt;\n vec3 col = uField;\n col = mix(col, uGlow, clamp(gI * mix(0.8, 1.0, uDark), 0.0, 1.0));\n col = mix(col, uCore, clamp(cI * mix(0.8, 1.25, uDark), 0.0, 1.0));\n col += (hash(gl_FragCoord.xy) - 0.5) / 255.0;\n gl_FragColor = vec4(col, 1.0);\n}`;/* HERO mode: Pearson's hero video (waves-fucsia-3-pearsonpurple-slow-16x9-l2r, 2.0s loop), measured in pearson-wave/HERO-NOTES.md.\n One big half oval, an ellipse whose centre is 904 px from the left of the 1440x810 frame (a 467 x 424 px radius), is painted as three\n soft-edged ridges (bright magenta on the outer side, decaying inward). The ridge profile is a 1D lookup of the distance inside the ellipse\n (LUT below, 512 bytes, d = -24..487 px at 1440x810). Over the top sits a sawtooth distortion: x is pushed by a 32.4px-period sawtooth of x\n (39.5px peak) and |y| by a smaller one, which gives the flame-shaped teeth and the thin lens slivers. The loop is the distortion sliding\n right by exactly one tooth. Everything is in \"video px\" (1440x810) and scaled to the container. */const HERO_LUT=\"AAAAAAAeLDdASlVgbXmGk6CsuMPO2ODo7vL2+Pn5+ff18u/r5+Pe2tXRzMjDv7q2sq6qpqKfm5iUkY6LiIWCf316d3VzcG5samdlY2FfXlxaWFZVU1JQT01MS0lIR0ZEQ0JBQD8+PTs6Ojk4NzY2NTQzMzIxMTAwMC8vLy8wMDEyMzU4PEBESlFYYWp1f4qWoq65xM/Z4unw9fr9/////v369/Tw7Ojj39rW0czIw766trKuqqain5uYlZGOi4iFgoB9e3h2dHFvbWtpZ2RiYV9dW1pYVlVTUlBPTkxLSUhHRkVEQ0FAPz4+PDs7Ojk4Nzc2NTQzMjExMDAvLi4tLS0tLSwsLC0tLS4vMTI0ODxBRk1UXWVveoWQnKi0v8rU3ebt8/f7/f7+/vz69/Tw7Ojk39rV0MzHwr66tbGtqaWhnpqXk5CNioaEgX57eXZ0cW9ta2hmZGJgXlxaWFdVU1JQTk1MSklHRkVDQkFAPj08Ozo5ODc2NTQzMjEwLy4tLCsrKikoJyYmJSQkIyIiISAgHx8eHR0cGxsaGhkZGBgXFxYWFhUUFBQTExISEREREBAQDw8PDg4ODQ0NDQwMDAsLCwsLCgoKCgoJCQkJCQgICAgHBwcHBgYGBgYGBQUFBQUFBQQEBAQEBAQEAwMDAwMDAwMDAwMDAgICAgICAgI=\";const FRAG_HERO=`\nprecision highp float;\nuniform vec2 uRes; uniform float uT; uniform float uInt; uniform float uDark; uniform sampler2D uLut;\nfloat hash(vec2 p){ return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453); }\nvec3 gradDark(float s){\n vec3 c = mix(vec3(13.,0.,66.), vec3(37.,14.,101.), clamp(s / 0.17, 0., 1.));\n c = mix(c, vec3(61.,27.,130.), clamp((s - 0.17) / 0.17, 0., 1.));\n c = mix(c, vec3(85.,34.,145.), clamp((s - 0.34) / 0.17, 0., 1.));\n c = mix(c, vec3(109.,39.,156.), clamp((s - 0.51) / 0.17, 0., 1.));\n c = mix(c, vec3(133.,44.,164.), clamp((s - 0.68) / 0.17, 0., 1.));\n c = mix(c, vec3(154.,47.,172.), clamp((s - 0.85) / 0.15, 0., 1.));\n return c / 255.;\n}\nvec3 gradLight(float s){\n vec3 c = mix(vec3(238.,235.,248.), vec3(222.,212.,246.), clamp(s / 0.34, 0., 1.));\n c = mix(c, vec3(200.,180.,240.), clamp((s - 0.34) / 0.34, 0., 1.));\n c = mix(c, vec3(168.,132.,230.), clamp((s - 0.68) / 0.32, 0., 1.));\n return c / 255.;\n}\nvoid main(){\n float asp = uRes.x / uRes.y;\n float z = 1.0; /* the oval always spans the full height; narrower boxes just crop its left side */\n vec2 q = gl_FragCoord.xy / uRes.y;\n float vx = ((q.x - asp) / z + 1.7778) * 810.0; /* video px, anchored to the right edge */\n float vy = (q.y - 0.5) / z * 810.0;\n float ph = fract((vx - 1096.8) / 32.395 - uT); /* the sawtooth slides right by one tooth per loop */\n float D = ph < 0.747 ? ph / 0.747 : (1.0 - ph) / 0.253;\n float xw = vx + D * (39.5 - 1.12 * (vx - 1300.0) / 100.0);\n float dy = abs(vy);\n float dyp = dy + D * (10.6 - 3.0 * dy / 100.0);\n float s = 0.0;\n if (dyp < 424.3) {\n float xcut = 903.7 + 466.6 * sqrt(1.0 - (dyp / 424.3) * (dyp / 424.3));\n float d = xcut - xw;\n s = texture2D(uLut, vec2((d + 24.0) / 512.0, 0.5)).r;\n if (d < -24.0 || d > 487.0) s = 0.0;\n }\n s = clamp(s * uInt, 0.0, 1.0);\n vec3 col = mix(gradLight(s), gradDark(s), uDark);\n col += (hash(gl_FragCoord.xy) - 0.5) / 255.0;\n gl_FragColor = vec4(col, 1.0);\n}`;function lum(c){const m=c.match(/[\\d.]+/g);if(!m||m.length<3)return 0;const a=m.length>3?+m[3]:1;if(a<.05)return-1;const f=v=>{v/=255;return v<=.03928?v/12.92:Math.pow((v+.055)/1.055,2.4);};return .2126*f(+m[0])+.7152*f(+m[1])+.0722*f(+m[2]);}/* how the site decides: ThemeSwitch stores `currentToggleState`; the page background luminance follows it */export function siteIsDark(el){try{let n=el.parentElement;while(n){const l=lum(getComputedStyle(n).backgroundColor);if(l>=0)return l<.4;n=n.parentElement;}}catch{}let t=null;try{t=localStorage.getItem(\"currentToggleState\");}catch{}const os=typeof matchMedia!==\"undefined\"&&matchMedia(\"(prefers-color-scheme: dark)\").matches;if(t===\"dark\"||t===\"light\")return t===(os?\"dark\":\"light\");/* the same rule as ProjectHeader: the stored toggle against the OS */return os;}export function mountWave(el,opts={}){let themeOpt=opts.theme||\"auto\";let intensity=opts.intensity??1;let mode=opts.mode===\"hero\"?\"hero\":\"arcs\";if(typeof document===\"undefined\")return{setFrozen(){},setTheme(){},setMode(){},setIntensity(){},destroy(){},seek(){},time:()=>0,frameMs:()=>0,webgl:false};if(getComputedStyle(el).position===\"static\")el.style.position=\"relative\";const resolve=()=>themeOpt===\"auto\"?siteIsDark(el)?\"dark\":\"light\":themeOpt;let target=resolve()===\"dark\"?1:0;let mixV=target;const mixCol=k=>[0,1,2].map(i=>COL.light[k][i]+(COL.dark[k][i]-COL.light[k][i])*mixV);const wrap=document.createElement(\"div\");wrap.setAttribute(\"aria-hidden\",\"true\");wrap.style.cssText=\"position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit\";el.insertBefore(wrap,el.firstChild);const setFallback=()=>{const f=mixCol(\"field\"),g=mixCol(\"glow\");if(mode===\"hero\"){const c=mixCol(\"core\");wrap.style.background=`radial-gradient(ellipse 34% 105% at 90% 50%, ${hex(c.map((v,i)=>Math.round(v*.55+f[i]*.45)))} 0%, ${hex(g.map((v,i)=>Math.round(v*.6+f[i]*.4)))} 45%, ${hex(f.map(Math.round))} 100%)`;return;}wrap.style.background=`radial-gradient(120% 140% at 6% 50%, ${hex(g.map((v,i)=>Math.round(v*.35+f[i]*.65)))} 0%, ${hex(f.map(Math.round))} 62%)`;};const canvas=document.createElement(\"canvas\");canvas.style.cssText=\"position:absolute;inset:0;width:100%;height:100%;display:block\";wrap.appendChild(canvas);const gl=canvas.getContext(\"webgl\",{antialias:false,alpha:false,powerPreference:\"low-power\"})||canvas.getContext(\"experimental-webgl\");const progs={};let lutTex=null;const build=(frag,names)=>{if(!gl)return null;const sh=(type,src)=>{const x=gl.createShader(type);gl.shaderSource(x,src);gl.compileShader(x);return gl.getShaderParameter(x,gl.COMPILE_STATUS)?x:null;};const vs=sh(gl.VERTEX_SHADER,VERT),fs=sh(gl.FRAGMENT_SHADER,frag);if(!vs||!fs)return null;const program=gl.createProgram();gl.attachShader(program,vs);gl.attachShader(program,fs);gl.linkProgram(program);if(!gl.getProgramParameter(program,gl.LINK_STATUS))return null;const U={};for(const n of names)U[n]=gl.getUniformLocation(program,n);return{program,U,loc:gl.getAttribLocation(program,\"a\")};};if(gl){gl.getExtension(\"OES_standard_derivatives\");const buf=gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER,buf);gl.bufferData(gl.ARRAY_BUFFER,new Float32Array([-1,-1,3,-1,-1,3]),gl.STATIC_DRAW);}const getProg=m=>{if(!gl)return null;if(progs[m]===undefined){if(m===\"arcs\")progs[m]=build(FRAG,[\"uRes\",\"uPh\",\"uInt\",\"uField\",\"uGlow\",\"uCore\",\"uDark\"]);else{progs[m]=build(FRAG_HERO,[\"uRes\",\"uT\",\"uInt\",\"uDark\",\"uLut\"]);if(progs[m]&&!lutTex){const bin=atob(HERO_LUT),px=new Uint8Array(bin.length);for(let i=0;i{const r=el.getBoundingClientRect();let dpr=Math.min(DPR_MAX,window.devicePixelRatio||1);dpr=Math.min(dpr,Math.sqrt(MAX_PIXELS/Math.max(1,r.width*r.height)));const w=Math.max(1,Math.round(r.width*dpr)),h=Math.max(1,Math.round(r.height*dpr));if(w!==W||h!==H){W=w;H=h;canvas.width=w;canvas.height=h;}};const draw=()=>{if(!ok||!gl)return;const P=getProg(mode)||arcsOnly;if(!P)return;const U=P.U;gl.useProgram(P.program);gl.enableVertexAttribArray(P.loc);gl.vertexAttribPointer(P.loc,2,gl.FLOAT,false,0,0);gl.viewport(0,0,W,H);gl.uniform2f(U.uRes,W,H);gl.uniform1f(U.uInt,intensity);gl.uniform1f(U.uDark,mixV);if(mode===\"hero\"&&U.uT){gl.activeTexture(gl.TEXTURE0);gl.bindTexture(gl.TEXTURE_2D,lutTex);gl.uniform1i(U.uLut,0);gl.uniform1f(U.uT,t%PERIOD_HERO/PERIOD_HERO);}else{gl.uniform1f(U.uPh,t%PERIOD/PERIOD);const f=mixCol(\"field\"),g=mixCol(\"glow\"),c=mixCol(\"core\");gl.uniform3f(U.uField,f[0]/255,f[1]/255,f[2]/255);gl.uniform3f(U.uGlow,g[0]/255,g[1]/255,g[2]/255);gl.uniform3f(U.uCore,c[0]/255,c[1]/255,c[2]/255);}gl.drawArrays(gl.TRIANGLES,0,3);};const running=()=>!destroyed&&visible&&!document.hidden;const loop=now=>{raf=0;if(!running())return;const dt=Math.min(100,now-last);last=now;if(!rm&&!frozen)t+=dt;if(fadeT0>=0){const k=Math.min(1,(now-fadeT0)/FADE),e=k*k*(3-2*k);mixV=fadeFrom+(target-fadeFrom)*e;if(k>=1)fadeT0=-1;if(!ok)setFallback();}draw();if(!rm&&!frozen||fadeT0>=0)raf=requestAnimationFrame(loop);};const kick=()=>{if(!raf&&running()){last=performance.now();raf=requestAnimationFrame(loop);}};const setTarget=()=>{const n=resolve()===\"dark\"?1:0;if(n===target)return;target=n;fadeFrom=mixV;fadeT0=performance.now();if(!running()){mixV=target;fadeT0=-1;if(!ok)setFallback();draw();return;}/* off-screen: nothing to cross-fade, just snap */kick();};size();const ro=typeof ResizeObserver!==\"undefined\"?new ResizeObserver(()=>{size();draw();kick();}):null;ro?.observe(el);const io=typeof IntersectionObserver!==\"undefined\"?new IntersectionObserver(es=>{visible=es[es.length-1].isIntersecting;kick();}):null;io?.observe(el);const onVis=()=>kick();const onMq=()=>{rm=!!mq?.matches;kick();};const onTheme=()=>setTarget();document.addEventListener(\"visibilitychange\",onVis);mq?.addEventListener?.(\"change\",onMq);window.addEventListener(\"themeChange\",onTheme);/* \"auto\" also re-reads the page every half second: the Theme switch rewrites styles without always firing an event */const poll=window.setInterval(()=>{if(themeOpt===\"auto\")setTarget();},500);if(rm)t=(mode===\"hero\"?PERIOD_HERO:PERIOD)*.35/* the still frame: arcs well across the surface */;draw();kick();return{webgl:ok,setFrozen(f){frozen=f;kick();}/* the showcase freezes the field while it shows the static montage */,setTheme(n){themeOpt=n;setTarget();},setIntensity(n){intensity=n;draw();kick();},setMode(m){const nm=m===\"hero\"?\"hero\":\"arcs\";if(nm===mode||nm===\"hero\"&&gl&&!getProg(\"hero\"))return;mode=nm;if(!ok)setFallback();draw();kick();},seek(ms){const per=mode===\"hero\"?PERIOD_HERO:PERIOD;frozen=true;t=(ms%per+per)%per;draw();},time:()=>t,/* mean CPU+GPU time per frame in ms (draw followed by a blocking read), for the perf check */frameMs(n=60){if(!ok||!gl)return 0;const px=new Uint8Array(4);const t0=performance.now();for(let i=0;i{const el=ref.current;if(!el)return;h.current=mountWave(el,{theme,intensity,mode});return()=>{h.current?.destroy();h.current=null;};},[]);React.useEffect(()=>{h.current?.setTheme(theme);},[theme]);React.useEffect(()=>{h.current?.setIntensity(intensity);},[intensity]);React.useEffect(()=>{h.current?.setMode(mode);},[mode]);return /*#__PURE__*/_jsx(\"div\",{ref:ref,style:{position:\"relative\",width:\"100%\",height:\"100%\",minHeight:120,overflow:\"hidden\"}});}\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"PearsonWave\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"WaveOpts\":{\"type\":\"tsType\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"siteIsDark\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"WaveMode\":{\"type\":\"tsType\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"WaveTheme\":{\"type\":\"tsType\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"WaveHandle\":{\"type\":\"tsType\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"mountWave\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./PearsonWave.map","/**\n * PEARSON COMPONENTS v3: six motion pieces from the Pearson Product Toolkit (Figma u2wRj1Oxu4PcTWXl46K95U), each in two versions:\n * \"standard\" (polished) and \"turned\" (turned up to 1000%).\n * Plain DOM, so they can later run inside the takeover. Each piece exports\n * mountX(el, { theme?, variant? }) -> { setTheme, setVariant, destroy, seek(ms), replay, play, time, loop, variant }\n * One rAF clock per mount; every element's state is a pure function of t (seekable). window.__pc[name].seek(ms) is there for testing.\n * Pauses off-screen and when the document is hidden. prefers-reduced-motion: no clock, a designed still (the payoff state).\n * Colours, radii, type, focus rings and icon paths come from the toolkit. The stage is a logical 640 x 480, scaled to the box.\n * Shared kit: camera (3D sweep), analytic motion blur (SVG feGaussianBlur driven by velocity), macOS-style cursor with five states.\n *//* ---------- maths and easing ---------- */import{jsx as _jsx}from\"react/jsx-runtime\";const cl=(v,a=0,b=1)=>Math.min(b,Math.max(a,v));const mix=(a,b,k)=>a+(b-a)*k;function bez(x1,y1,x2,y2){return x=>{if(x<=0)return 0;if(x>=1)return 1;let t=x;for(let i=0;i<12;i++){const c=3*x1*t*(1-t)*(1-t)+3*x2*t*t*(1-t)+t*t*t-x;const d=3*x1*(1-t)*(1-t)+6*(x2-x1)*(1-t)*t+3*(1-x2)*t*t;if(Math.abs(d)<1e-7)break;t-=c/d;}t=cl(t);return 3*y1*t*(1-t)*(1-t)+3*y2*t*t*(1-t)+t*t*t;};}const SOFT=bez(.22,.68,.26,1);const TRAVEL=bez(.6,0,.3,1.3);/* cursor travel: ease in-out with a tiny overshoot and settle */const OQ=bez(.25,1,.5,1);const EIN=bez(.5,0,.9,.4);/* phase: eased progress of t between a and b */const ph=(t,a,b,e=x=>x)=>e(cl((t-a)/(b-a)));/* damped spring step response, solved analytically from time so it stays seekable (stiffness 260, damping 22) */function spr(ms,k=260,c=22){if(ms<=0)return 0;const x=ms/1e3,w0=Math.sqrt(k),z=c/(2*w0);if(z<1){const wd=w0*Math.sqrt(1-z*z);return 1-Math.exp(-z*w0*x)*(Math.cos(wd*x)+z*w0/wd*Math.sin(wd*x));}return 1-Math.exp(-w0*x)*(1+w0*x);}/* press: down to .96 over 90ms, release over 280ms ease-out-quart */function press(t,t0,lo=.96){if(tph(t,a,b,SOFT)*(1-ph(t,c,d,SOFT));const hash=n=>{const s=Math.sin(n*127.1+311.7)*43758.5453;return s-Math.floor(s);};/* ---------- the toolkit's real icon paths (from the Figma SVG assets) ---------- */const ICON_X=\"M12.0085 11.0339L8.93207 7.99367L11.9581 4.90276C12.2103 4.6494 12.2103 4.19337 11.9581 3.94001C11.7059 3.68666 11.252 3.68666 10.9999 3.94001L7.97383 7.03092L4.89737 3.99069C4.6452 3.73733 4.1913 3.73733 3.93913 3.99069C3.68696 4.24404 3.68696 4.70007 3.93913 4.95343L7.01559 7.99367L3.98956 11.0846C3.73739 11.3379 3.73739 11.794 3.98956 12.0473C4.14086 12.1993 4.29216 12.25 4.4939 12.25C4.6452 12.25 4.84693 12.1993 4.99824 12.0473L8.02426 8.95641L11.1007 11.9966C11.252 12.1487 11.4033 12.1993 11.6051 12.1993C11.7564 12.1993 11.9581 12.1487 12.1094 11.9966C12.3111 11.7433 12.3111 11.2873 12.0085 11.0339Z\";const ICON_TICK=\"M6.34834 12.15C6.1142 12.15 5.88005 12.0329 5.70445 11.8573L3.1874 8.63771C2.89472 8.28648 2.95325 7.81817 3.30447 7.52548C3.65569 7.23279 4.12397 7.29133 4.41665 7.64256L6.34834 10.1012L11.6166 4.13027C11.9093 3.77904 12.3776 3.77904 12.7288 4.01319C13.08 4.30588 13.08 4.77419 12.7873 5.12542L6.9337 11.8573C6.75809 12.0329 6.58249 12.15 6.34834 12.15Z\";const ICON_ALERT=\"M9.10394 1.63069L15.8257 13.0886C16.1814 13.6949 15.9754 14.4731 15.3657 14.8268C15.1702 14.9402 14.9479 14.9999 14.7216 14.9999H1.27815C0.572247 14.9999 0 14.4309 0 13.729C0 13.504 0.0600838 13.283 0.174111 13.0886L6.89586 1.63069C7.25154 1.02439 8.03417 0.819598 8.64392 1.17327C8.83437 1.28374 8.99284 1.44132 9.10394 1.63069ZM7.5 5.99994C7.22386 5.99994 7 6.2238 7 6.49994V9.49994C7 9.77608 7.22386 9.99994 7.5 9.99994H8.5C8.77614 9.99994 9 9.77608 9 9.49994V6.49994C9 6.2238 8.77614 5.99994 8.5 5.99994H7.5ZM7.5 10.9999C7.22386 10.9999 7 11.2238 7 11.4999V12.4999C7 12.7761 7.22386 12.9999 7.5 12.9999H8.5C8.77614 12.9999 9 12.7761 9 12.4999V11.4999C9 11.2238 8.77614 10.9999 8.5 10.9999H7.5Z\";const ICON_OK=\"M8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16ZM7.52793 11.5685L11.8509 5.39287C12.1113 5.02086 12.0208 4.50818 11.6488 4.24777C11.2768 3.98736 10.7641 4.07783 10.5037 4.44985L6.75046 9.81158L5.25001 8.21735C4.93879 7.88667 4.41842 7.8709 4.08775 8.18213C3.75707 8.49335 3.7413 9.01372 4.05253 9.34439L6.2457 11.6746C6.53367 11.9806 7.00071 12.017 7.33085 11.7741C7.38777 11.7391 7.44437 11.6837 7.50289 11.6038C7.51158 11.5922 7.51993 11.5804 7.52793 11.5685Z\";const svg=(w,d,vb=16,extra=\"\")=>``;let uid=0;const ARROW_ICON=()=>{const id=\"pa\"+ ++uid;return``;};/* ---------- theme tokens (light / dark values from the toolkit's variables) ---------- */const BASE_CSS=`\n.pc-host { position: relative; }\n.pc { --ease: cubic-bezier(.22,.68,.26,1); position: absolute; inset: 0; overflow: hidden; border-radius: inherit; background: var(--surface); color: var(--ink);\n font-family: \"Plus Jakarta Sans\", Inter, system-ui, sans-serif; font-feature-settings: \"liga\" 0; -webkit-font-smoothing: antialiased; }\n.pc[data-pc-theme=\"light\"] {\n --surface: #e8e6f3; --ink: #0d004d; --ink2: #5b5ea3; --brand: #512eab; --brandh: #0d004d; --onbrand: #f3f2f6;\n --inbg: #ffffffe5; --inbga: #ffffff; --inborder: #0d004d52; --inborderh: #0d004d66; --ringsh: #512eab26; --focus: #2392fb;\n --track: #512eab1a; --trackfg: #512eab; --pill: #fcfbfd; --pillbrand: #512eab; --pillfg: #ffffff;\n --btn: #512eab; --btnh: #351c75; --btnp: #05001c; --btnfg: #ffffff; --amb: #ffce00; --ambh: #ffaa11; --ambp: #ff8c0d; --ambfg: #05001c;\n --errfg: #d60c00; --errb: #ff362a; --okfg: #167947; --okb: #00b057; --oksh: #c5eacf; --ph: #5b5ea3;\n --sh1: #0d004d1f; --sh2: #0d004d14; --sh3: #0d004d0a; --tipbg: #ffffff4d; --tipborder: #0d004d73; --tipfg: #5b5ea3; --grid: #0d004d12;\n --amethyst: #512eab; --fuchsia: #df41cf; --turquoise: #56e2e1; --amber: #ffce00;\n --amethystp: #653fc6; --fuchsiap: #df41cf; --turquoisep: #56e2e1; --amberp: #ffce00; --patd: #0d004d38; --gl: #9a7bff; --sha: .2;\n --rp1: rgb(193 191 255 / .7); --rp2: rgb(193 191 255 / .34); --rpw: rgb(193 191 255 / .10);\n}\n.pc[data-pc-theme=\"dark\"] {\n --surface: #101012; --ink: #f3f2f6; --ink2: #cfced6; --brand: #c1bfff; --brandh: #c1bfff; --onbrand: #0d004d;\n --inbg: #b79bfe1a; --inbga: #b79bfe26; --inborder: #ffffff52; --inborderh: #ffffff66; --ringsh: #b79bfe66; --focus: #2392fb;\n --track: #c1bfff33; --trackfg: #c1bfff; --pill: #c1bfff33; --pillbrand: #c1bfff; --pillfg: #05001c;\n --btn: #c1bfff; --btnh: #8b8cd1; --btnp: #5b5ea3; --btnfg: #05001c; --amb: #ffe266; --ambh: #ffaa11; --ambp: #ff8c0d; --ambfg: #05001c;\n --errfg: #ff8475; --errb: #ffa394; --okfg: #62c480; --okb: #96d7a7; --oksh: #004a21; --ph: #b9b8bf;\n --sh1: #0d004d00; --sh2: #0d004d00; --sh3: #0d004d00; --tipbg: #c1bfff1a; --tipborder: #ffffff73; --tipfg: #cfced6; --grid: #ffffff14;\n --amethyst: #5638a1; --fuchsia: #d44cc6; --turquoise: #60d8d8; --amber: #f2c60d;\n --amethystp: #653fc6; --fuchsiap: #ec8de2; --turquoisep: #7ce8e7; --amberp: #ffd846; --patd: #0d004d38; --gl: #e3e0ff; --sha: .12;\n --rp1: rgb(81 46 171 / .6); --rp2: rgb(81 46 171 / .3); --rpw: rgb(81 46 171 / .09);\n}\n.pc-stage { position: absolute; left: 50%; top: 50%; width: 640px; height: 480px; margin: -240px 0 0 -320px; transform-origin: 50% 50%; pointer-events: none; }\n.pc-cam { position: absolute; left: 0; top: 0; width: 640px; height: 480px; perspective: 1600px; perspective-origin: 50% 50%; }\n.pc-g { position: absolute; left: 0; top: 0; width: 640px; height: 480px; transform-origin: 320px 240px; }\n.pc-z { position: absolute; left: 0; top: 0; transform-origin: 0 0; }\n.pc.pc-tt, .pc.pc-tt * { transition: background-color .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease), fill .4s var(--ease), stroke .4s var(--ease), box-shadow .4s var(--ease) !important; }\n.pc * { box-sizing: border-box; }\n.pc svg { display: block; }\n/* light sheen on large fills: a low-alpha gradient whose angle and position follow the camera's rotateY */\n.pc .sh { background-image: linear-gradient(calc(100deg + var(--ry, 0) * 2.2deg), transparent 34%, rgb(255 255 255 / var(--sha)) 50%, transparent 66%); background-size: 280% 100%; background-repeat: no-repeat; background-position: calc(50% - var(--ry, 0) * 7%) 0; }\n/* the shared cursor kit */\n.pc-cur { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; opacity: 0; z-index: 40; transform-origin: 0 0; }\n.pc-cur .ci { position: absolute; opacity: 0; filter: drop-shadow(0 2px 1.5px rgb(0 0 0 / .35)) opacity(var(--cf, 1)); } /* the library's Cursor/Shadow effect; --cf is the showcase's stage-edge fade (1 everywhere else) */\n.pc[data-pc-theme=\"light\"] .ci .cf { fill: #000; } .pc[data-pc-theme=\"light\"] .ci .cs { stroke: #fff; }\n.pc[data-pc-theme=\"dark\"] .ci .cf { fill: #fff; } .pc[data-pc-theme=\"dark\"] .ci .cs { stroke: #000; }\n.pc-rip { position: absolute; left: 0; top: 0; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; border: 1.5px solid var(--brand); box-shadow: 0 0 0 1.5px var(--surface); opacity: 0; pointer-events: none; z-index: 39; }\n.pc-dot { position: absolute; left: 0; top: 0; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--brand); opacity: 0; pointer-events: none; z-index: 39; }\n`;function injectOnce(id,css){if(typeof document===\"undefined\"||document.getElementById(id))return;const s=document.createElement(\"style\");s.id=id;s.textContent=css;document.head.appendChild(s);}function injectFont(){if(typeof document===\"undefined\"||document.getElementById(\"pc-font\"))return;const l=document.createElement(\"link\");l.id=\"pc-font\";l.rel=\"stylesheet\";l.href=\"https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600&display=swap\";document.head.appendChild(l);}const mkEl=(tag,cls,parent,html=\"\",css=\"\")=>{const e=document.createElement(tag);if(cls)e.className=cls;if(html)e.innerHTML=html;if(css)e.style.cssText=css;parent.appendChild(e);return e;};const setK=(e,vars)=>{for(const k in vars)e.style.setProperty(k,String(typeof vars[k]===\"number\"?Math.round(vars[k]*1e3)/1e3:vars[k]));};const f2=n=>n.toFixed(2);/* ---------- focus ring: a real element around the target ----------\n position absolute, inset -(gap + width) from the target's border box, border = width solid toolkit focus colour,\n border-radius = target radius + gap + width. Lives inside the target's own transform wrapper, so it scales with presses.\n Toolkit values: width 3, gap 3, colour #2392fb (--focus). \"Draws in\" with a conic-gradient mask sweeping 0 to 360deg from 12 o'clock. */const RING_W=3,RING_GAP=3;const ringCss=`.pc-fr { position: absolute; pointer-events: none; border: ${RING_W}px solid var(--focus); opacity: 0; }`;/* draw the ring: k in 0..1 sweep; the mask is removed at 1 so the finished ring has no seam or notch */function ringDraw(r,k,vis=1){if(k<=.001||vis<=.001){r.style.opacity=\"0\";return;}r.style.opacity=String(Math.round(vis*1e3)/1e3);if(k>=.999){r.style.webkitMaskImage=r.style.maskImage=\"none\";return;}const a=k*360;const m=`conic-gradient(from 0deg, #000 ${Math.max(0,a-1.6).toFixed(2)}deg, transparent ${a.toFixed(2)}deg)`;r.style.webkitMaskImage=r.style.maskImage=m;}/* make a ring element: borderBox radius of the target + gap + width, inset from the target's PADDING box so we add the target's border */function mkRing(target,targetRadius,targetBorder=0){const r=mkEl(\"div\",\"pc-fr\",target);const o=RING_GAP+RING_W+targetBorder;r.style.inset=`-${o}px`;r.style.borderRadius=typeof targetRadius===\"number\"?`${targetRadius+RING_GAP+RING_W}px`:targetRadius;return r;}/* ---------- Material-style ripple, Pearson look: concentric rings from the exact press point, clipped to the pill ----------\n Behaviour as in Material: the ripple starts at the press point, expands as concentric circles centred there, is clipped to the\n button's pill, grows to cover the button in ~450ms on ease-out, then fades after release. Look as in Pearson: instead of one flat blob,\n 4 thin rings with a crisp edge and a soft inner glow, staggered 50ms, over a very faint fill wash. Pure function of t (seekable).\n `host` is the button's .bgl layer (it scales with the press, so the ripple always stays inside the pill); (dx, dy) is the press point\n relative to the button centre in the button's own px. */const RP_N=4,RP_STAG=50,RP_DUR=450,RP_HOLD=90,RP_FADE=420;function mkRipple(host,btn,dx,dy,washOnly=false){const clip=mkEl(\"div\",\"pc-rp\",host);const wash=mkEl(\"div\",\"pc-rpw\",clip);const rings=washOnly?[]:Array.from({length:RP_N},()=>mkEl(\"div\",\"pc-rpr\",clip));/* v24: washOnly, the rings are drawn by the caller as concentric pills outside the button */let on=false;return(t,t0)=>{const live=t>t0&&t1-Math.pow(1-cl(k),3);/* Material's decelerate, ease-out */const put=(e,r,op)=>{e.style.width=e.style.height=`${(2*r).toFixed(2)}px`;e.style.transform=`translate(${(lx-r).toFixed(2)}px,${(ly-r).toFixed(2)}px)`;e.style.opacity=op.toFixed(3);};const inA=cl((t-t0)/60);put(wash,far*eo((t-t0)/RP_DUR),inA*(1-eo((t-t0-RP_HOLD)/(RP_FADE+80))));for(let i=0;i`;document.body.appendChild(w);s=w;}return s.querySelector(\"defs\");}function ensureGoo(id,std,a,b){const d=defsRoot();if(d.querySelector(\"#\"+id))return;const tmp=document.createElementNS(\"http://www.w3.org/2000/svg\",\"svg\");tmp.innerHTML=``;d.appendChild(tmp.firstElementChild);}/* blur amount from a speed: 0 below v0, rising to max */const bl=(v,v0=600,div=380,max=6)=>cl((Math.abs(v)-v0)/div,0,1)*max;function mkBlur(el,base=\"\"){const id=\"pcb\"+ ++uid;const ns=\"http://www.w3.org/2000/svg\";const tmp=document.createElementNS(ns,\"svg\");tmp.innerHTML=``;const f=tmp.firstElementChild;defsRoot().appendChild(f);curBucket.push(f);const fe=f.firstElementChild;let last=\"\";return(bx,by)=>{const on=bx>.08||by>.08;const v=on?`${base} url(#${id})`.trim():base;if(on)fe.setAttribute(\"stdDeviation\",`${Math.max(.01,bx).toFixed(2)} ${Math.max(.01,by).toFixed(2)}`);if(v!==last){last=v;el.style.filter=v;}};}/* numeric derivative of a position function (px per second): still a pure function of t, so it stays seekable */const vel1=(f,t)=>(f(t+7)-f(t-7))/14*1e3;/* harmonics are integers of the loop, so the camera at the loop end equals the camera at 0. push = [a,b,c,d] window for the push-in. *//* v3: tiles carry text, so the camera is one slow drift per loop, capped at +-3deg, never an oscillation */function camStd(L,p,push,_amp=1,pushAmt=.04){return t=>{const u=2*Math.PI*t/L;return{ry:2.8*Math.sin(u+p),rx:1.6*Math.cos(u+p*1.7),sc:1+Math.min(pushAmt,.05)*win(t,push[0],push[1],push[2],push[3])};};}/* ---------- pointer kit: macOS-style cursor with five cross-fading states + click ripple ---------- */const CS=1.25/* library glyphs drawn at 1.25x */;const CUR_GLYPH={arrow:{w:21.2292,h:29.0512,hot:[4.8,2.8],fill:\"M4.80036 3.12973C4.79964 2.84181 5.14452 2.69361 5.35289 2.8923L16.3258 13.3553C16.5207 13.5411 16.42 13.8697 16.1545 13.9143L11.1696 14.7533L13.8885 21.1858C13.9569 21.3475 13.8852 21.5344 13.7262 21.609L12.4248 22.2194C12.2569 22.2982 12.0571 22.2216 11.9849 22.0507L9.27574 15.6415L5.37828 18.957C5.16627 19.1373 4.84023 18.9871 4.83953 18.7088L4.80036 3.12973Z\",stroke:\"M3.9 3.13217C3.89745 2.11908 5.03532 1.56694 5.82187 2.11655L5.97422 2.24057L16.9468 12.7035C17.678 13.4007 17.3004 14.6342 16.3043 14.8021L12.442 15.4516L14.7173 20.8353C14.974 21.4425 14.7048 22.1443 14.108 22.4242L12.8072 23.0346C12.1769 23.3302 11.4269 23.042 11.1558 22.4008L8.92441 17.1215L5.96152 19.643C5.16592 20.3195 3.94191 19.7557 3.93906 18.7113L3.9 3.13217Z\"},point:{w:26.596,h:34.6007,hot:[9.8,2.8],fill:\"M8.78986 18.0593V3.79971C8.78986 3.2478 9.23869 2.80039 9.79249 2.80039C10.3069 2.80039 10.7378 3.18847 10.7899 3.6986L11.8264 13.857C11.8393 13.9835 11.9461 14.0797 12.0737 14.0797C12.211 14.0797 12.3223 13.9684 12.3223 13.8316C12.3223 13.0029 12.9963 12.3291 13.8278 12.3291H13.8695C14.724 12.3291 15.4167 13.0197 15.4167 13.8714V14.2707C15.4167 14.3819 15.5071 14.4717 15.6186 14.4717C15.7301 14.4717 15.8205 14.3816 15.8205 14.2705V14.039C15.8205 13.2577 16.4559 12.6244 17.2398 12.6244C18.0236 12.6244 18.6616 13.2579 18.6759 14.039C18.6854 14.5524 18.6965 15.0368 18.7028 15.3032C18.7057 15.422 18.8031 15.5157 18.9223 15.5157H18.948C19.0552 15.5157 19.1421 15.4291 19.1421 15.3223C19.1421 14.5175 19.8653 13.9021 20.6636 14.0223C21.3124 14.12 21.7956 14.6765 21.7956 15.3306V22.2882C21.7956 25.3337 20.0938 27.8003 17.1783 27.8003H12.0544C10.7419 27.8004 9.45909 27.3915 8.37033 26.6258C7.81166 26.233 7.31708 25.7553 6.9012 25.2118C6.10537 24.1716 5.79856 22.8613 5.5121 21.5847L4.95834 19.1169C4.38024 16.889 5.44673 15.5812 6.52115 15.2567C7.0335 15.1019 7.45344 15.5531 7.55344 16.0774L7.94662 18.1385C7.98478 18.3385 8.16021 18.4832 8.36449 18.4832C8.59942 18.4832 8.78986 18.2934 8.78986 18.0593Z\",stroke:\"M9.79269 1.9C10.7663 1.90012 11.586 2.63545 11.6853 3.60703L12.5222 11.815C12.8985 11.5714 13.3465 11.4293 13.8279 11.4293H13.8698C14.6133 11.4294 15.279 11.7619 15.7282 12.2857C16.1347 11.9365 16.6627 11.7242 17.24 11.7242C18.282 11.7243 19.1609 12.4087 19.4636 13.3472C19.8605 13.1467 20.3214 13.0607 20.7976 13.1324C21.8818 13.2957 22.696 14.2263 22.696 15.3306V22.2886C22.6959 23.9694 22.2266 25.5568 21.2859 26.7447C20.3293 27.9525 18.9175 28.7007 17.1784 28.7007H12.0544C10.5538 28.7008 9.09039 28.2325 7.85226 27.3619C7.21736 26.9154 6.65667 26.3732 6.18625 25.7584C5.25151 24.5365 4.91311 23.0278 4.63351 21.7818L4.0798 19.314L4.08078 19.313C3.41595 16.7011 4.66554 14.8771 6.26046 14.3951C6.85951 14.2141 7.40821 14.4051 7.78488 14.7349C7.82117 14.7667 7.85597 14.8003 7.88937 14.8345V3.79941C7.88953 2.74782 8.74479 1.9 9.79269 1.9Z\"},open:{w:29.5996,h:34.6007,hot:[14.8,14.5],fill:\"M6.75998 15.2744C7.41044 16.1091 9.0808 18.0193 10.1307 19.2097C10.4497 19.5713 11.0333 19.3403 11.0291 18.854C10.9935 14.7392 10.8073 10.6279 10.6344 6.51651C10.6156 6.0693 10.9663 5.69643 11.4056 5.69643C11.7823 5.69643 12.104 5.97347 12.1668 6.35199L13.4531 14.0965C13.5142 14.464 13.8266 14.7331 14.1924 14.7331C14.5903 14.7331 14.9189 14.4163 14.941 14.0114L15.5116 3.57056C15.5352 3.13845 15.886 2.80039 16.3106 2.80039C16.7436 2.80039 17.098 3.15138 17.1105 3.59247L17.419 14.5249C17.4274 14.8208 17.6443 15.0672 17.9321 15.1077C18.2669 15.1547 18.5729 14.9082 18.6051 14.5652L19.4177 5.9217C19.459 5.48192 19.8215 5.14618 20.255 5.14618C20.7347 5.14618 21.1172 5.55425 21.0953 6.04254L20.6953 14.9752C20.6811 15.2918 20.905 15.5678 21.2128 15.6132C21.5099 15.6571 21.7935 15.4722 21.8791 15.1789L23.2638 10.4339C23.3901 10.0009 23.8431 9.76064 24.2636 9.90344C24.6257 10.0264 24.8483 10.3972 24.791 10.7818L22.9961 22.818C22.4402 25.7719 21.4916 27.8003 18.9142 27.8003H14.3845C13.2242 27.8004 12.0902 27.4308 11.1277 26.7387C10.1652 26.0466 9.4179 25.0636 8.98134 23.9154L4.79995 15.2744C5.2801 14.2957 6.14733 14.4883 6.75998 15.2744Z\",stroke:\"M16.4835 1.90879C17.3356 1.99495 17.9857 2.71145 18.0099 3.56699L18.1769 9.49964L18.5216 5.8375L18.5451 5.67344C18.6982 4.8642 19.4002 4.24571 20.255 4.2457C21.2645 4.2457 22.0382 5.09929 21.9943 6.08262L21.7042 12.563L22.3996 10.1822L22.4582 10.0152C22.7652 9.26134 23.5734 8.82029 24.38 9.00254L24.5529 9.05134L24.6964 9.10704C25.3932 9.41664 25.7932 10.1607 25.6808 10.9146L23.8859 22.9507C23.8842 22.962 23.8831 22.9737 23.881 22.9849C23.5985 24.4862 23.1941 25.8972 22.4445 26.942C21.6469 28.0534 20.4932 28.7007 18.9142 28.7007H14.3849C13.0318 28.7008 11.7147 28.2688 10.6027 27.4693C9.5042 26.6794 8.65659 25.5678 8.15737 24.2798L3.9894 15.6666C3.8689 15.4175 3.87054 15.1269 3.99233 14.8785C4.34509 14.1595 4.975 13.659 5.79116 13.7144C6.50213 13.7628 7.08255 14.2243 7.46987 14.7212C7.97357 15.3676 9.1316 16.702 10.1154 17.8248C10.0608 14.0742 9.894 10.3238 9.7355 6.5543C9.6959 5.61253 10.4377 4.79656 11.4054 4.79648L11.5597 4.80332C12.2682 4.86854 12.8482 5.37919 13.0236 6.05722L13.0548 6.20469L14.1164 12.5982L14.6134 3.52109L14.63 3.35605C14.7539 2.53905 15.4506 1.9 16.3107 1.9L16.4835 1.90879Z\"},grab:{w:26.5962,h:25.6007,hot:[13.3,10.8],fill:\"M12.3225 4.55347V4.66726C12.3225 4.74231 12.2613 4.80315 12.1859 4.80315C12.1105 4.80315 12.0493 4.74231 12.0493 4.66726V4.42213C12.0493 3.52647 11.3197 2.80039 10.4197 2.80039C9.51961 2.80039 8.79002 3.52647 8.79002 4.42213V9.07494C8.79002 9.30874 8.59958 9.49824 8.36466 9.49824C8.16038 9.49824 7.98494 9.35374 7.94678 9.15404L7.5536 7.09626C7.4536 6.57287 7.03366 6.12236 6.52131 6.27688C5.4469 6.60093 4.3804 7.9066 4.9585 10.1309L5.51226 12.5947C5.79872 13.8692 6.10553 15.1774 6.90137 16.2159C7.31725 16.7586 7.81183 17.2355 8.3705 17.6277C9.45931 18.3921 10.742 18.8004 12.0546 18.8003H17.1785C20.094 18.8003 21.7958 16.3376 21.7958 13.2971V6.15042C21.7958 5.44256 21.2719 4.84282 20.5675 4.74434L20.4595 4.72924C19.658 4.61718 18.9421 5.23648 18.9421 6.04192V6.11898C18.9421 6.18408 18.8891 6.23686 18.8237 6.23686C18.7594 6.23686 18.7069 6.18686 18.7053 6.12294C18.7001 5.90642 18.6883 5.40809 18.6779 4.86216C18.6621 4.02729 17.979 3.35016 17.1399 3.35016C16.3008 3.35016 15.6205 4.02707 15.6205 4.8621V5.09318C15.6205 5.14917 15.5749 5.19455 15.5187 5.19455C15.4624 5.19455 15.4168 5.14965 15.4168 5.09366V4.59514C15.4168 3.74482 14.7241 3.05535 13.8696 3.05535H13.8279C12.9965 3.05535 12.3225 3.72608 12.3225 4.55347Z\",stroke:\"M10.4198 1.9C11.1557 1.90003 11.8171 2.21714 12.2801 2.71933C12.6992 2.36772 13.2392 2.15488 13.828 2.15488H13.87C14.5822 2.15499 15.2229 2.46159 15.6708 2.94785C16.0787 2.63638 16.5876 2.44988 17.1395 2.4498C18.1691 2.4498 19.045 3.09152 19.4032 3.9918C19.762 3.83972 20.1665 3.7792 20.5839 3.8375L20.6923 3.85312C21.8377 4.01337 22.696 4.99018 22.6962 6.15V13.2974C22.6961 14.9763 22.2271 16.5622 21.286 17.7486C20.3292 18.9547 18.917 19.7007 17.1786 19.7007H12.0546C10.5543 19.7008 9.09151 19.2331 7.8534 18.3638C7.21849 17.918 6.6579 17.3772 6.18739 16.7632C5.25223 15.5429 4.91426 14.0356 4.63465 12.7916L4.07996 10.3287L4.08094 10.3277C3.41543 7.71776 4.66702 5.89656 6.26161 5.41562L6.37293 5.38535C6.92747 5.2588 7.43087 5.44585 7.78407 5.75449C7.82067 5.7865 7.85587 5.82057 7.88953 5.85508V4.42246C7.88953 3.02561 9.02681 1.9 10.4198 1.9Z\"}};const HOT={ibeam:[12,12]};for(const k in CUR_GLYPH)HOT[k]=CUR_GLYPH[k].hot;const rr=(x,y,w,h,r,tr=\"\")=>``;const INK=\"#0d0d1c\";const outl=(s,extra=\"\")=>`${s}${s}${extra}`;const CUR_SVG={ibeam:`${outl(rr(11,3.2,2,17.6,.6)+rr(8.4,3.2,7.2,2,.8)+rr(8.4,18.8,7.2,2,.8))}`};/* v12: the library's open hand (\"Hover\") has hairline gaps between the fingers where its fill path stops short of the outline's finger slits (the shadow shows through). Repaired locally: the outline itself is also filled, under the stroke. */const CUR_FILL_OUTLINE={open:true};for(const k in CUR_GLYPH){const g=CUR_GLYPH[k];CUR_SVG[k]=`${CUR_FILL_OUTLINE[k]?``:\"\"}`;}function mkCursorKit(parent){const rip=mkEl(\"div\",\"pc-rip\",parent),dot=mkEl(\"div\",\"pc-dot\",parent);const c=mkEl(\"div\",\"pc-cur\",parent);const layers={};for(const k in CUR_SVG){const l=mkEl(\"div\",\"ci\",c,CUR_SVG[k]);l.style.left=`${(-HOT[k][0]*CS).toFixed(2)}px`;l.style.top=`${(-HOT[k][1]*CS).toFixed(2)}px`;layers[k]=l;}const blur=mkBlur(c);return(t,cfg)=>{const o=cl(cfg.op(t));if(o<.002){c.style.opacity=\"0\";rip.style.opacity=\"0\";dot.style.opacity=\"0\";return;}const p=cfg.pos(t);/* state cross-fade over 80ms */let i=0;for(let n=0;n=cfg.st[n].t)i=n;const cur=cfg.st[i].s,prev=i>0?cfg.st[i-1].s:cur;const k=cl((t-cfg.st[i].t)/80);for(const key in layers)layers[key].style.opacity=String(key===cur?prev===cur?1:k:key===prev?1-k:0);/* press: .85 over 70ms, back over 220ms */let s=1;for(const cc of cfg.clicks){if(tcc.b+220)continue;s=Math.min(s,tcfg.pos(tt).x,t),vy=vel1(tt=>cfg.pos(tt).y,t);blur(bl(vx),bl(vy));/* click ripple from the hotspot: 1.5px ring 0 to 28px, plus a soft filled dot that fades */let ripOn=false;for(const cc of cfg.clicks){const kk=(t-cc.a)/560;if(kk>0&&kk<1){const hp=cfg.pos(cc.a),e=SOFT(kk);rip.style.transform=`translate(${f2(hp.x)}px,${f2(hp.y)}px) scale(${e.toFixed(3)})`;rip.style.opacity=String(((1-kk)*.85*o).toFixed(3));dot.style.transform=`translate(${f2(hp.x)}px,${f2(hp.y)}px) scale(${(.4+.6*e).toFixed(3)})`;dot.style.opacity=String(((1-e)*.34*o).toFixed(3));ripOn=true;}}if(!ripOn){rip.style.opacity=\"0\";dot.style.opacity=\"0\";}};}function mkPath(pts,arc=26){return t=>{if(t<=pts[0].t)return{x:pts[0].x,y:pts[0].y};for(let i=0;i{const f=near?{x:pts[1].x+near[0],y:pts[1].y+near[1]}:g.__curFrom||camFix(g,last,tOut,pts[0].t);pts[0].x=f.x;pts[0].y=f.y;return inner(t);};}function curActive(pts,clicks,extra=[],cut=1e9){const A=[...extra];for(let i=0;i.5)A.push([pts[i].t,pts[i+1].t]);clicks.forEach(c=>A.push([c.a-260,c.b+220]));return A.filter(iv=>iv[0][iv[0],Math.min(iv[1],cut)]);}function curOp(active,loop,cut=-1){const S=active.slice().sort((a,b)=>a[0]-b[0]),M=[];S.forEach(iv=>{const l=M[M.length-1];if(l&&iv[0]<=l[1])l[1]=Math.max(l[1],iv[1]);else M.push([iv[0],iv[1]]);});const gaps=M.map((iv,i)=>[iv[1],i+1gp[1]-gp[0]>=800);return t=>{for(const[e,s]of gaps)for(const sh of[0,-loop]){const a=e+sh,b=s+sh;if(t>=a&&t<=b){const d=e===cut?0:400;return 1-ph(t,a+d,a+d+200,SOFT)*(1-ph(t,b-200,b,SOFT));}}return 1;};}function mkCurCfg(g,o){const last=o.last||{x:o.pts[o.pts.length-1].x,y:o.pts[o.pts.length-1].y};const act=curActive(o.pts,o.clicks,o.extra,o.cut);const tOut=act.reduce((m,iv)=>Math.max(m,iv[1]),0)+(o.cut?100:500);/* about when it is last seen */const base=mkPathF(g,o.pts,last,tOut,o.arc,o.near);const pos=o.pos?t=>o.pos(t,base):base;const cfg={pos,op:curOp(act,o.loop,o.cut),st:o.st,clicks:o.clicks};g.__curLast={last,tOut,tIn:o.pts[0].t,outAt:tMax=>act.filter(iv=>iv[1]<=tMax).reduce((m,iv)=>Math.max(m,iv[1]),0)+(o.cut?100:500)};return{cfg,last};}function mountPiece(name,el,opts,pair){injectOnce(\"pc-base\",BASE_CSS+ringCss);injectFont();el.classList.add(\"pc-host\");const host=mkEl(\"div\",\"pc\",el);host.setAttribute(\"data-pc-theme\",opts.theme||\"light\");const stage=mkEl(\"div\",\"pc-stage\",host);const camEl=mkEl(\"div\",\"pc-cam\",stage);const g=mkEl(\"div\",\"pc-g\",camEl);let variant=opts.variant||\"standard\";const pick=v=>pair[v]||pair.turned;let def=pick(variant),render=()=>{};let bucket=[];let curLastV=null;const build=()=>{bucket.forEach(b=>b.remove());bucket=[];g.innerHTML=\"\";injectOnce(\"pc-\"+name+\"-\"+variant,def.css);curBucket=bucket;g.__cam=def.cam;g.__curLast=null;render=def.build(g);curLastV=g.__curLast||null;curBucket=[];};build();const mq=typeof matchMedia!==\"undefined\"?matchMedia(\"(prefers-reduced-motion: reduce)\"):null;let rm=!!mq?.matches;let t=0,frozen=false,visible=true,destroyed=false,last=performance.now(),raf=0,force=true,ttT=0;const fit=()=>{const r=opts.embedded?{width:el.offsetWidth,height:el.offsetHeight}:el.getBoundingClientRect();const s=Math.min(r.width/640,r.height/480)||1;stage.style.transform=`scale(${s})`;};fit();const ro=typeof ResizeObserver!==\"undefined\"?new ResizeObserver(fit):null;ro?.observe(el);const io=typeof IntersectionObserver!==\"undefined\"?new IntersectionObserver(es=>{visible=es[es.length-1].isIntersecting;last=performance.now();}):null;io?.observe(el);const onMq=()=>{rm=!!mq?.matches;force=true;};mq?.addEventListener?.(\"change\",onMq);let rt=-1;const tick=now=>{if(destroyed)return;raf=requestAnimationFrame(tick);const dt=Math.min(100,now-last);last=now;if(!rm&&!frozen&&visible&&!document.hidden)t=(t+dt)%def.loop;const tt=rm&&!opts.embedded?def.still:t/* embedded: the showcase owns the clock; under reduced motion it starts paused instead of playing a still */;if(tt!==rt||force){rt=tt;force=false;render(tt);const c=def.cam(tt);g.style.transform=`rotateX(${f2(c.rx)}deg) rotateY(${f2(c.ry)}deg) rotateZ(${f2(c.rz||0)}deg) translate(${f2(c.tx||0)}px,${f2(c.ty||0)}px) scale(${c.sc.toFixed(4)})`;g.style.setProperty(\"--ry\",f2(c.ry));g.style.setProperty(\"--rx\",f2(c.rx));}};raf=requestAnimationFrame(tick);const h={loop:def.loop,variant,setTheme(th){if(host.getAttribute(\"data-pc-theme\")===th)return;host.classList.add(\"pc-tt\");host.setAttribute(\"data-pc-theme\",th);if(def.rst){t=0;last=performance.now();rt=-1;force=true;}/* pieces with their own theme timeline restart from the new page theme */clearTimeout(ttT);ttT=window.setTimeout(()=>host.classList.remove(\"pc-tt\"),480);},setVariant(v){if(v===variant)return;variant=v;def=pick(v);h.variant=v;h.loop=def.loop;build();t=0;last=performance.now();rt=-1;force=true;},seek(ms){frozen=true;t=(ms%def.loop+def.loop)%def.loop;force=true;},replay(){t=0;frozen=false;last=performance.now();force=true;},play(){frozen=false;last=performance.now();},time:()=>t,curInfo:()=>curLastV?{...curLastV,sc:tt=>def.cam(tt).sc}:null,setCurFrom(p){g.__curFrom=p;force=true;},destroy(){if(destroyed)return;destroyed=true;cancelAnimationFrame(raf);clearTimeout(ttT);ro?.disconnect();io?.disconnect();mq?.removeEventListener?.(\"change\",onMq);bucket.forEach(b=>b.remove());host.remove();el.classList.remove(\"pc-host\");const w=window;if(w.__pc&&w.__pc[name]===h)delete w.__pc[name];}};if(!opts.embedded){const w=window;(w.__pc=w.__pc||{})[name]=h;}return h;}/* ======================================================================================================\n STANDARD v2. Each piece is polished: sweeping camera, motion blur on fast movers, a proper cursor, focus rings as real elements.\n ====================================================================================================== *//* ---------- 2. SWITCH (Input / Switch, 3897:72293 light / 3897:72307 dark). 64 x 38, border 1, radius 20, 24px knob, 16px icons ---------- */const SWITCH_CSS=`\n.pc-sw-grid { position: absolute; width: 196px; height: 162px; transform-origin: 0 0; }\n.pc-sw-row { position: absolute; left: 0; height: 38px; width: 196px; display: flex; align-items: center; gap: 12px; }\n.pc-sw-row .lb { width: 120px; font: 500 16px/1 \"Plus Jakarta Sans\", Inter, system-ui, sans-serif; color: var(--ink); }\n.pc-sw { position: relative; width: 64px; height: 38px; border-radius: 20px; border: 1px solid; flex: none; transform-origin: 50% 50%;\n background-color: color-mix(in srgb, color-mix(in srgb, var(--inbg), var(--brand) calc(var(--k) * 100%)), var(--brandh) calc(var(--h) * var(--k) * 100%));\n border-color: color-mix(in srgb, color-mix(in srgb, var(--inborder), var(--inborderh) calc(var(--h) * 100%)), var(--brand) calc(var(--k) * 100%));\n box-shadow: 0 0 0 4px color-mix(in srgb, var(--ringsh) calc(var(--h) * 100%), transparent); }\n.pc-sw .kn { position: absolute; left: 6px; top: 6px; width: 24px; height: 24px; border-radius: 50%; background: color-mix(in srgb, var(--brand), var(--onbrand) calc(var(--k) * 100%)); }\n.pc-sw .kn svg { position: absolute; left: 4px; top: 4px; color: color-mix(in srgb, var(--brand), var(--brandh) calc(var(--h) * 100%)); }\n.pc-sw .xi { position: absolute; left: 38px; top: 10px; color: var(--ink); }\n`;export function mountSwitchStd(){const LOOP=8600;return{loop:LOOP,still:4300,css:SWITCH_CSS,cam:camStd(LOOP,.4,[1700,2300,4800,5600]),build(g){const S=2,X0=(640-196*S)/2,Y0=(480-162*S)/2;const z=mkEl(\"div\",\"pc-z pc-sw-grid\",g);z.style.transform=`translate(${X0}px,${Y0}px) scale(${S})`;const labels=[\"Captions\",\"Dark mode\",\"Notifications\"];const rows=labels.map((l,i)=>{const r=mkEl(\"div\",\"pc-sw-row\",z,`
${l}
`);r.style.top=i*62+\"px\";const sw=mkEl(\"div\",\"pc-sw sh\",r,`
${svg(16,ICON_TICK)}
${svg(16,ICON_X)}
`);const kn=sw.querySelector(\".kn\");return{sw,kn,xi:sw.querySelector(\".xi\"),tick:kn.querySelector(\"svg\"),ring:mkRing(sw,20,1),blur:mkBlur(kn)};});const c1={x:X0+S*(120+12+32),y:Y0+S*19};const tl=[[{t:2060,v:1},{t:5200,v:0}],[{t:2700,v:1},{t:5800,v:0}],[]];const base=[0,0,1];const knobPos=(i,t)=>{let from=base[i],to=base[i],t0=-1e9;for(const s of tl[i])if(t>=s.t){from=to;to=s.v;t0=s.t;}const p=spr(t-t0,300,21);return{pos:mix(from,to,p),raw:p,from,to};};const cur=mkCursorKit(g);const tg={x:c1.x+6,y:c1.y+8},rest={x:tg.x+44,y:tg.y+38};const{cfg}=mkCurCfg(g,{loop:LOOP,pts:[{t:560,x:0,y:0},{t:1500,...tg},{t:2380,...tg},{t:3e3,...rest}],st:[{t:0,s:\"arrow\"},{t:1350,s:\"point\"},{t:2450,s:\"arrow\"}],clicks:[{a:2e3,b:2080}]});return t=>{rows.forEach((r,i)=>{const st=knobPos(i,t);const k=cl(st.pos);const sq=1+.1*Math.sin(Math.PI*cl(st.raw))*(st.from===st.to?0:1);r.kn.style.transform=`translateX(${(26*st.pos).toFixed(2)}px) scaleX(${sq.toFixed(4)})`;const kk=SOFT(k);r.tick.style.opacity=String(kk);r.tick.style.transform=`rotate(${(-90*(1-kk)).toFixed(1)}deg)`;r.xi.style.opacity=String(1-kk);r.xi.style.transform=`rotate(${(-90*kk).toFixed(1)}deg)`;let h=0,pr=1,fr=0;if(i===0){h=ph(t,1500,1700,SOFT)*(1-ph(t,2450,2800,SOFT));pr=press(t,2e3);}setK(r.sw,{\"--k\":k,\"--h\":h});r.sw.style.transform=`scale(${pr.toFixed(4)})`;ringDraw(r.ring,i===1?ph(t,2300,2800,SOFT):0,1-ph(t,3700,4e3,SOFT));/* motion blur along the knob's travel axis, from its analytic velocity */const v=vel1(tt=>26*S*knobPos(i,tt).pos,t);r.blur(bl(v,110,90,3.2),0);});cur(t,cfg);};}};}/* ---------- 4. SLIDER (Input / Slider, 3897:70652 light / 3897:70666 dark). 4px track, 20px handle, level-2 shadow, label chip ---------- */const SLIDER_CSS=`\n.pc-sl { position: absolute; width: 360px; height: 40px; transform-origin: 0 0; }\n.pc-sl .tr { position: absolute; left: 0; right: 0; top: 18px; height: 4px; border-radius: 1000px; background: var(--track); }\n.pc-sl .fl { position: absolute; top: 18px; height: 4px; background-color: var(--trackfg); border-radius: 1000px; }\n.pc-sl .hd { position: absolute; top: 10px; width: 20px; height: 20px; border-radius: 50%; transform-origin: 50% 50%; }\n.pc-sl .hk { position: absolute; inset: 0; border-radius: 50%; background-color: var(--trackfg);\n filter: drop-shadow(0 1px 7px var(--sh3)) drop-shadow(0 5px 4px var(--sh2)) drop-shadow(0 3px 2.5px var(--sh1)); }\n.pc-sl .tip { position: absolute; top: -34px; left: 0; min-width: 34px; height: 28px; padding: 4px 6px; border-radius: 4px; border: 1px solid var(--tipborder); background: var(--tipbg);\n display: flex; align-items: center; justify-content: center; font: 600 14px/1.6 \"Plus Jakarta Sans\", Inter, system-ui, sans-serif; color: var(--tipfg); font-variant-numeric: tabular-nums; white-space: nowrap; }\n`;const SL_SHADOW=\"drop-shadow(0 1px 7px var(--sh3)) drop-shadow(0 5px 4px var(--sh2)) drop-shadow(0 3px 2.5px var(--sh1))\";export function mountSliderStd(){const LOOP=8800;return{loop:LOOP,still:6e3,css:SLIDER_CSS,cam:camStd(LOOP,2.9,[1500,2100,6e3,6800]),build(g){const S=1.6,X0=(640-360*S)/2;const mkSl=(y,range)=>{const e=mkEl(\"div\",\"pc-sl\",g);e.style.transform=`translate(${X0}px,${y}px) scale(${S})`;mkEl(\"div\",\"tr\",e);const fl=mkEl(\"div\",\"fl\",e);const hs=(range?[0,1]:[0]).map(()=>{const h=mkEl(\"div\",\"hd\",e);const k=mkEl(\"div\",\"hk\",h);return{h,blur:mkBlur(k,SL_SHADOW)};});return{e,fl,hs};};const Y1=150,Y2=292;const A=mkSl(Y1,false),B=mkSl(Y2,true);const hf=mkRing(A.hs[0].h,\"50%\");const tip=mkEl(\"div\",\"tip\",A.e);tip.style.opacity=\"0\";const cx=v=>10+v/100*340;const place=(s,lo,hi)=>{const hiX=cx(hi);s.hs[s.hs.length-1].h.style.left=(hiX-10).toFixed(2)+\"px\";if(lo===null){s.fl.style.left=\"0px\";s.fl.style.width=hiX.toFixed(2)+\"px\";}else{const loX=cx(lo);s.hs[0].h.style.left=(loX-10).toFixed(2)+\"px\";s.fl.style.left=loX.toFixed(2)+\"px\";s.fl.style.width=Math.max(0,hiX-loX).toFixed(2)+\"px\";}};const drag=bez(.4,0,.2,1.1);const single=t=>t<6500?mix(20,85,drag(ph(t,1900,3300))):mix(85,20,ph(t,6500,7600,SOFT));const rng=t=>{const r=t<7e3?spr(t-4700,220,20):1-ph(t,7e3,8100,SOFT);return{lo:mix(40,15,r),hi:mix(60,85,r)};};const sx=v=>X0+S*cx(v);const hy=Y1+S*20;const v85=single(3550);const restS={x:sx(v85)+46,y:hy+40};const cur=mkCursorKit(g);const{cfg}=mkCurCfg(g,{loop:LOOP,arc:22,pts:[{t:500,x:0,y:0},{t:1300,x:sx(20),y:hy},{t:3550,x:sx(v85),y:hy},{t:3800,x:sx(v85),y:hy},{t:4350,...restS}],extra:[[1300,3550]],st:[{t:0,s:\"arrow\"},{t:1250,s:\"open\"},{t:1650,s:\"grab\"},{t:3550,s:\"open\"},{t:3800,s:\"arrow\"}],clicks:[{a:1650,b:3550}],pos:(t,base)=>t<1300?base(t):t<3550?{x:sx(single(t)),y:hy}:base(t)});return t=>{const v1=single(t),r=rng(t);place(A,null,v1);place(B,r.lo,r.hi);const grab=ph(t,1650,1750,SOFT)*(1-ph(t,3550,3800,SOFT));A.hs[0].h.style.transform=`scale(${(1+.15*grab).toFixed(4)})`;ringDraw(hf,ph(t,1650,1750,SOFT),1-ph(t,3550,3800,SOFT));const tv=ph(t,1650,1850,SOFT)*(1-ph(t,3600,3950,SOFT));tip.textContent=String(Math.round(v1));tip.style.opacity=String(tv);tip.style.transform=`translateX(${(cx(v1)-17).toFixed(2)}px)`;const bA=bl(vel1(tt=>S*cx(single(tt)),t),250,300,4);A.hs[0].blur(bA,0);B.hs[0].blur(bl(vel1(tt=>S*cx(rng(tt).lo),t),250,300,4),0);B.hs[1].blur(bl(vel1(tt=>S*cx(rng(tt).hi),t),250,300,4),0);cur(t,cfg);};}};}/* ---------- 5. PRIMARY BUTTON (Button / Primary, 3956:101494 light / 3956:101508 dark). Pill, 44px, 12px padding, 16px icon. Focus ring 3px, gap 3, #2392fb ---------- */const BUTTON_CSS=`\n.pc-bt-wrap { position: absolute; left: 0; top: 0; width: 200px; height: 44px; display: grid; place-items: center; transform-origin: 0 0; }\n.pc-bt-t { grid-area: 1 / 1; position: relative; height: 44px; border-radius: 1000px; transform-origin: 50% 50%; }\n.pc-bt { position: relative; height: 44px; display: flex; align-items: center; padding: 12px; border-radius: 1000px; white-space: nowrap; overflow: hidden; }\n.pc-bt .bgl { position: absolute; inset: 0; border-radius: 1000px; z-index: 0; transform-origin: 50% 50%; }\n.pc-bt .tx, .pc-bt .ic, .pc-bt .sp { position: relative; z-index: 1; }\n.pc-bt .tx { padding: 0 8px 4px; font: 500 16px/1 \"Plus Jakarta Sans\", Inter, system-ui, sans-serif; }\n.pc-bt .ic { width: 16px; height: 16px; flex: none; }\n.pc-bt .sp { width: 12px; flex: none; }\n.pc-bt.a .bgl { background-color: color-mix(in srgb, color-mix(in srgb, var(--btn), var(--btnh) calc(var(--h) * 100%)), var(--btnp) calc(var(--p) * 100%)); }\n.pc-bt.a { color: var(--btnfg); }\n.pc-bt.y .bgl { background-color: color-mix(in srgb, color-mix(in srgb, var(--amb), var(--ambh) calc(var(--h) * 100%)), var(--ambp) calc(var(--p) * 100%)); }\n.pc-bt.y { color: var(--ambfg); }\n.pc-pulse { position: absolute; inset: 0; border-radius: 1000px; border: 2px solid var(--btn); opacity: 0; pointer-events: none; }\n.pc-pulse.y { border-color: var(--amb); }\n`;export function mountButtonStd(){return mkButtonSeq(false);}/* ---------- 6. TEXT INPUT (Input / Text Line, 3874:86767 light / 3874:86781 dark). Label, help text, field, feedback ---------- */const INPUT_CSS=`\n.pc-in { position: absolute; width: 340px; transform-origin: 0 0; }\n.pc-in .lb { font: 500 16px/1 \"Plus Jakarta Sans\", Inter, system-ui, sans-serif; color: var(--ink); padding-bottom: 4px; }\n.pc-in .hp { font: 400 14px/1.6 \"Plus Jakarta Sans\", Inter, system-ui, sans-serif; color: var(--ink2); }\n.pc-in .fb { overflow: hidden; height: 33.6px; }\n.pc-in .fbi { display: flex; align-items: center; gap: 8px; height: 25.6px; margin-top: 8px; position: relative; font: 400 16px/1.6 \"Plus Jakarta Sans\", Inter, system-ui, sans-serif; }\n.pc-in .fbi .ic { position: relative; width: 16px; height: 16px; flex: none; }\n.pc-in .fbi .tx { position: relative; flex: 1; height: 25.6px; }\n.pc-in .fbi .tx span { position: absolute; left: 0; top: 0; white-space: nowrap; }\n.pc-in .fw { position: relative; margin-top: 8px; }\n.pc-in .fd { position: relative; height: 51.6px; padding: 12px; border-radius: 4px; border: 1px solid var(--bc);\n --bc: color-mix(in srgb, color-mix(in srgb, color-mix(in srgb, var(--inborder), var(--brand) calc(var(--f) * 100%)), var(--errb) calc(var(--e) * 100%)), var(--okb) calc(var(--o) * 100%));\n background: color-mix(in srgb, var(--inbg), var(--inbga) calc(var(--a) * 100%));\n box-shadow: 0 0 0 4px color-mix(in srgb, var(--oksh) calc(var(--os) * 100%), transparent);\n font: 400 16px/1.6 \"Plus Jakarta Sans\", Inter, system-ui, sans-serif; color: var(--ink); white-space: pre; display: flex; align-items: center; }\n.pc-in .car { display: inline-block; width: 1.5px; height: 21px; margin-left: 1px; background: var(--ink); vertical-align: middle; }\n`;const FEEDBACK_HTML=`
Enter a full email addressLooks good
`;export function mountInputStd(){const LOOP=8400;return{loop:LOOP,still:6e3,css:INPUT_CSS,cam:camStd(LOOP,5.1,[1e3,1700,6600,7600]),build(g){const S=1.6,X0=(640-340*S)/2;const z=mkEl(\"div\",\"pc-z pc-in\",g);mkEl(\"div\",\"lb\",z,\"School email\");mkEl(\"div\",\"hp\",z,\"We'll send your class code here\");const fb=mkEl(\"div\",\"fb\",z);const fbi=mkEl(\"div\",\"fbi\",fb,FEEDBACK_HTML);const icWrap=fbi.querySelector(\".ic\");icWrap.innerHTML=`
${svg(16,ICON_ALERT)}
${svg(16,ICON_OK)}
`;const iaE=icWrap.children[0],ioE=icWrap.children[1];const te=fbi.querySelector(\".te\"),tg=fbi.querySelector(\".tg\");te.style.color=\"var(--errfg)\";tg.style.color=\"var(--okfg)\";const fw=mkEl(\"div\",\"fw\",z);const fd=mkEl(\"div\",\"fd\",fw);const txt=mkEl(\"span\",\"\",fd),car=mkEl(\"span\",\"car\",fd);const rg=mkRing(fd,4,1);const FULL=\"sam@school.ac.uk\";const cur=mkCursorKit(g);const fx=X0+S*40,fy=(480-(16+4+22.4+8+33.6+8+51.6)*S)/2+S*(16+4+22.4+8+33.6+8+26);/* the re-edit click goes to the END of the text: the I-beam lands just after the last typed character (measured), and the caret appears there */const meas=mkEl(\"span\",\"\",fd,\"sam@school\");meas.style.cssText=\"position:absolute;left:12px;top:0;visibility:hidden;white-space:pre;pointer-events:none\";const txL=X0+S*13;const pts=[{t:300,x:0,y:0},{t:780,x:txL+6,y:fy},{t:1100,x:txL+6,y:fy},{t:3900,x:txL+6,y:fy},{t:4250,x:txL+S*100.5,y:fy},{t:4440,x:txL+S*100.5,y:fy}];const{cfg}=mkCurCfg(g,{loop:LOOP,arc:20,pts,st:[{t:0,s:\"arrow\"},{t:650,s:\"ibeam\"}],clicks:[{a:880,b:960},{a:4340,b:4420}],cut:4440,last:{x:txL+S*100.5,y:fy}});const shakeF=t=>t>=2400&&t<2800?4*Math.sin(2*Math.PI*(t-2400)/110)*Math.exp(-(t-2400)/130):0;return t=>{let s=\"\";if(t>=7e3)s=FULL.slice(0,Math.max(0,FULL.length-Math.floor((t-7e3)/20)));else if(t>=4500)s=\"sam@school\"+\".ac.uk\".slice(0,Math.floor((t-4500)/45));else if(t>=1200)s=\"sam@school\".slice(0,Math.floor((t-1200)/45));txt.textContent=s;const f1=ph(t,700,1e3,SOFT)*(1-ph(t,2300,2550,SOFT));const f2_=ph(t,4200,4450,SOFT)*(1-ph(t,5200,5450,SOFT));const f3=ph(t,6900,7e3,SOFT)*(1-ph(t,7300,7500,SOFT));const f=Math.max(f1,f2_,f3);const ok=ph(t,5e3,5500,SOFT)*(1-ph(t,7500,8100,SOFT));const er=ph(t,2350,2750,SOFT)*(1-ph(t,5e3,5500,SOFT));const fbv=ph(t,2350,2800,SOFT)*(1-ph(t,7500,8e3,SOFT));const th=Math.max(er,ok);const osh=ph(t,5e3,5300,SOFT)*(1-ph(t,6200,6900,SOFT));const bf=f*(th>.01?0:1);setK(fd,{\"--f\":bf,\"--e\":er,\"--o\":ok,\"--a\":Math.max(bf,th),\"--th\":th,\"--os\":osh});fd.style.transform=`translateX(${shakeF(t).toFixed(2)}px)`;/* focus ring: a real element, inset -(gap+width), radius 4+gap+width; its gap grows from the field edge to the toolkit's 3px */const gap=RING_GAP*f;rg.style.opacity=String(cl(f*1.4));rg.style.inset=`-${(1+gap+RING_W).toFixed(2)}px`;rg.style.borderRadius=`${(4+gap+RING_W).toFixed(2)}px`;const typing=t>=1200&&t<1850||t>=4500&&t<4970||t>=7e3&&t<7320;car.style.opacity=f>.5&&(typing||Math.floor(t/530)%2===0)?\"1\":\"0\";fbi.style.opacity=String(fbv);const popA=spr(t-2450,300,16)*(1-ph(t,5e3,5300,SOFT));const popO=spr(t-5100,300,16);iaE.style.transform=`scale(${mix(.3,1,popA).toFixed(3)})`;iaE.style.opacity=String(cl(popA*3)*(1-ph(t,5e3,5300,SOFT)));ioE.style.transform=`scale(${mix(.3,1,popO).toFixed(3)})`;ioE.style.opacity=String(cl(popO*3)*(t>=5100?1:0));te.style.opacity=String(1-ph(t,5e3,5400,SOFT));tg.style.opacity=String(ph(t,5100,5500,SOFT));const Y0=(480-(16+4+22.4+8+33.6+8+51.6)*S)/2;z.style.transform=`translate(${X0}px,${Y0}px) scale(${S})`;if(t>3500&&t<5e3){const ex=txL+S*(meas.offsetWidth+2.5);pts[4].x=ex;pts[5].x=ex;}cur(t,cfg);};}};}/* ---------- 1. DATA VISUALISATION (Visualization panel, 5941:53608 light / 5941:54251 dark; patterns 29641:146993) ---------- */const VIZ_CSS=`\n.pc-vz-d { position: absolute; top: 14px; width: 135px; text-align: center; }\n.pc-vz-d .nm { font: 500 12px/1 \"Plus Jakarta Sans\", Inter, system-ui, sans-serif; color: var(--ink2); margin-bottom: 11px; }\n.pc-vz-d .pctx { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; white-space: nowrap; transform: none !important; font: 500 25px/1 \"Plus Jakarta Sans\", Inter, system-ui, sans-serif; letter-spacing: -.5px; color: var(--ink); font-variant-numeric: tabular-nums; }\n.pc-vz-d .ring { position: relative; width: 135px; height: 135px; }\n.pc-vz-d svg { position: absolute; inset: 0; width: 135px; height: 135px; overflow: visible; }\n.pc-vz-b { position: absolute; border-radius: 5px; overflow: hidden; }\n.pc-vz-b svg { position: absolute; inset: 0; width: 100%; height: 100%; }\n.pc-vz-l { position: absolute; font: 500 11px/1 \"Plus Jakarta Sans\", Inter, system-ui, sans-serif; color: var(--ink2); width: 30px; text-align: center; }\n.pc-vz-g { position: absolute; left: 14px; width: 612px; height: 1px; background: var(--grid); }\n`;const BAR_H=[125.84/320,235/320,176/320,288/320,240/320,144/320];const AMETHYST_RAMP=[\"#b79bfe\",\"#9677f0\",\"#7950e2\",\"#653fc6\",\"#512eab\",\"#472399\"];const BAR_PAT=[\"horizontal\",\"vertical\",\"diagR\",\"diagL\",\"diamonds\",\"dots\"];function patternDefs(id,type,sc,color){const T=r=>`patternTransform=\"scale(${sc}) rotate(${r})\"`;const st=`style=\"fill:${color}\"`;switch(type){case\"horizontal\":return``;case\"vertical\":return``;case\"diagR\":return``;case\"diagL\":return``;case\"diamonds\":return``;default:return``;}}const HUES=[{name:\"Amethyst\",v:\"amethyst\",pct:80,pat:\"horizontal\",patc:\"rgba(255,255,255,.4)\"},{name:\"Fuchsia\",v:\"fuchsia\",pct:64,pat:\"diagR\",patc:\"rgba(255,255,255,.4)\"},{name:\"Turquoise\",v:\"turquoise\",pct:47,pat:\"dots\",patc:\"var(--patd)\"},{name:\"Amber\",v:\"amber\",pct:92,pat:\"diamonds\",patc:\"var(--patd)\"}];const DC=2*Math.PI*81,DS=135/180;export function mountVizStd(){const LOOP=8200;return{loop:LOOP,still:5600,css:VIZ_CSS,cam:camStd(LOOP,.9,[1800,2600,5200,6200],.85,.03),build(g){const donuts=HUES.map((hu,i)=>{const x=20+i*(135+20);const d=mkEl(\"div\",\"pc-vz-d\",g);d.style.left=x+\"px\";mkEl(\"div\",\"nm\",d,hu.name);const ring=mkEl(\"div\",\"ring\",d);const pid=\"vzp\"+ ++uid,cid=\"vzc\"+uid;const arcs=`stroke-width=\"18\" fill=\"none\" transform=\"rotate(-90 90 90)\"`;ring.innerHTML=`${patternDefs(pid,hu.pat,1,hu.patc)}\n \n \n \n \n `;const tx=mkEl(\"div\",\"pctx\",ring,\"0%\");const q=c=>ring.querySelector(\".\"+c);return{x,tx,sol:q(\"sol\"),pb:q(\"pb\"),pp:q(\"pp\"),cr:q(\"cr\"),pg:q(\"pg\"),tr:[q(\"t1\"),q(\"t2\"),q(\"t3\")],hu};});const CH=230,BASE=440,BW=84,BG=(600-6*BW)/5;for(let i=0;i<5;i++)mkEl(\"div\",\"pc-vz-g\",g,\"\",`top:${BASE-CH*i/4}px`);const bars=BAR_H.map((hr,i)=>{const x=20+i*(BW+BG),h=hr*CH;const b=mkEl(\"div\",\"pc-vz-b\",g);b.style.left=x+\"px\";b.style.width=BW+\"px\";b.style.backgroundColor=AMETHYST_RAMP[i];const pid=\"vzq\"+ ++uid;const ov=mkEl(\"div\",\"\",b);ov.style.cssText=\"position:absolute;inset:0;\";ov.innerHTML=`${patternDefs(pid,BAR_PAT[i],.6,\"rgba(255,255,255,.4)\")}`;mkEl(\"div\",\"pc-vz-l\",g,String(i+1).padStart(2,\"0\"),`left:${x+BW/2-15}px;top:${BASE+9}px`);return{b,ov,x,h,blur:mkBlur(b)};});const pf=(i,t)=>{const grow=ph(t,300+120*i,1500+120*i,SOFT),unw=ph(t,6900+60*i,7700+60*i,SOFT);return{p:HUES[i].pct/100*grow*(1-unw),grow,unw};};const hf=(i,t)=>BAR_H[i]*CH*spr(t-(1900+i*60),260,22)*(1-ph(t,6900+(5-i)*50,7800+(5-i)*50,SOFT));return t=>{const W=640*ph(t,3700,5100,SOFT);const patOp=1-ph(t,6500,7200,SOFT);donuts.forEach((d,i)=>{const{p,grow,unw}=pf(i,t);const len=DC*p;const da=`${len.toFixed(2)} ${DC.toFixed(2)}`;[d.sol,d.pb,d.pp].forEach(c=>{c.setAttribute(\"stroke-dasharray\",da);c.style.opacity=p<.003?\"0\":\"1\";});d.tx.textContent=Math.round(d.hu.pct*grow*(1-unw))+\"%\";d.cr.setAttribute(\"width\",String(cl((W-d.x)/135)*200));d.pg.style.opacity=String(patOp);/* arc-head motion blur: a soft light smear behind the head (ahead of it on the unwind), sized by the head's speed */const sp=vel1(tt=>pf(i,tt).p,t)*DC*DS;const k=cl((Math.abs(sp)-70)/330),dir=sp>=0?1:-1;[1,.62,.3].forEach((m,n)=>{const L=Math.min(len,46*k*m);d.tr[n].setAttribute(\"stroke-dasharray\",`${L.toFixed(2)} ${DC.toFixed(2)}`);d.tr[n].setAttribute(\"stroke-dashoffset\",String(-(dir>0?len-L:len)));d.tr[n].setAttribute(\"opacity\",String((p>.003?.13*k:0).toFixed(3)));});});bars.forEach((b,i)=>{const h=Math.max(0,hf(i,t));b.b.style.top=(BASE-h).toFixed(2)+\"px\";b.b.style.height=h.toFixed(2)+\"px\";b.b.style.opacity=h<.5?\"0\":\"1\";b.ov.style.clipPath=`inset(0 ${((1-cl((W-b.x)/BW))*100).toFixed(2)}% 0 0)`;b.ov.style.opacity=String(patOp);b.blur(0,bl(vel1(tt=>hf(i,tt),t),320,520,5));});};}};}/* ======================================================================================================\n TURNED UP (1000%). Same components, same toolkit visuals, maximal personality. All still pure functions of t.\n ====================================================================================================== *//* v3: same capped, slow drift as Standard (+-3deg); the lab's turned-up energy lives in the shapes, not the camera */const camUp=(L,p,push,amp=1,pushAmt=.05)=>camStd(L,p,push,amp,pushAmt);const sstep=x=>{const k=cl(x);return k*k*(3-2*k);};const bump=(t,a,d)=>{const k=(t-a)/d;return k>0&&k<1?Math.sin(Math.PI*k):0;};/* ---------- 2. SWITCH, turned up ---------- */const SWITCH_UP_CSS=`\n.pc-sw.up { background-color: var(--inbg); box-shadow: 0 0 calc(var(--gw) * 28px) color-mix(in srgb, var(--brand) calc(var(--gw) * 60%), transparent); }\n.pc-sw.up .wash { position: absolute; inset: -1px; border-radius: 20px; background: var(--brand); }\n.pc-sw.up .gg { position: absolute; inset: -1px; filter: url(#pcGoo); }\n.pc-sw.up .gg .b { position: absolute; border-radius: 50%; background: var(--kc); }\n.pc-sw.up .kn { background: transparent; z-index: 3; }\n.pc-sw.up .xi { z-index: 2; }\n.pc-sw.up .pt { position: absolute; left: 44px; top: 18px; width: 0; height: 0; z-index: 4; }\n.pc-sw.up .pt i { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; }\n.pc-sw-row.up { transform-origin: 50% 50%; }\n`;export function mountSwitchUp(){const LOOP=9200;return{loop:LOOP,still:4e3,css:SWITCH_CSS+SWITCH_UP_CSS,cam:camUp(LOOP,.4,[1900,2700,6300,7300],2.6,.14),build(g){ensureGoo(\"pcGoo\",3.4,20,-8.5);const S=2,X0=(640-196*S)/2,Y0=(480-162*S)/2;const z=mkEl(\"div\",\"pc-z pc-sw-grid\",g);z.style.transform=`translate(${X0}px,${Y0}px) scale(${S})`;const labels=[\"Captions\",\"Dark mode\",\"Notifications\"];const cols=[\"var(--amber)\",\"var(--fuchsia)\",\"var(--turquoise)\",\"var(--brand)\"];const rows=labels.map((l,i)=>{const r=mkEl(\"div\",\"pc-sw-row up\",z,`
${l}
`);r.style.top=i*62+\"px\";const sw=mkEl(\"div\",\"pc-sw up\",r,`
${svg(16,ICON_TICK)}
${svg(16,ICON_X)}
${[0,1,2,3,4,5,6,7].map(n=>``).join(\"\")}
`);const kn=sw.querySelector(\".kn\");const b1=sw.querySelector(\".b1\"),b2=sw.querySelector(\".b2\");return{r,sw,kn,b1,b2,wash:sw.querySelector(\".wash\"),xi:sw.querySelector(\".xi\"),tick:kn.querySelector(\"svg\"),pts:Array.from(sw.querySelectorAll(\".pt i\")),ring:mkRing(sw,20,1),blur:mkBlur(kn)};});const ON=[2060,2240,2420],OFF=[5580,5760,5940];const tl=i=>[{t:ON[i],v:1},{t:OFF[i],v:0}];const knob=(i,t,k,c,delay=0)=>{let from=0,to=0,t0=-1e9;for(const s of tl(i))if(t>=s.t+delay){from=to;to=s.v;t0=s.t+delay;}return{pos:mix(from,to,spr(t-t0,k,c)),from,to,t0};};const c1={x:X0+S*(120+12+32),y:Y0+S*19};const tg={x:c1.x+4,y:c1.y+6},rest={x:tg.x+44,y:tg.y+38};const{cfg}=mkCurCfg(g,{loop:LOOP,pts:[{t:1250,x:0,y:0},{t:1650,...tg},{t:2380,...tg},{t:3e3,...rest},{t:4700,...rest},{t:5400,...tg},{t:5900,...tg},{t:6500,...rest}],near:[64,50],/* v18: the cursor appears beside the first switch and presses within ~600ms of the clock starting */st:[{t:0,s:\"arrow\"},{t:1500,s:\"point\"},{t:2450,s:\"arrow\"},{t:5250,s:\"point\"},{t:5950,s:\"arrow\"}],clicks:[{a:2e3,b:2080},{a:5520,b:5600}]});const cur=mkCursorKit(g);return t=>{rows.forEach((r,i)=>{const st=knob(i,t,360,17);const tail=knob(i,t,150,12,70);const pos=cl(st.pos,-.1,1.12);const k=cl(st.pos);const sp=Math.abs(vel1(tt=>knob(i,tt,360,17).pos,t))/1e3;const sq=cl(sp/3.6);const kc=`color-mix(in srgb, var(--brand), var(--onbrand) ${(sstep((k-.08)/.35)*100).toFixed(1)}%)`;r.sw.style.setProperty(\"--kc\",kc);r.sw.style.setProperty(\"--gw\",String(Math.round(cl(k)*1e3)/1e3));r.sw.style.setProperty(\"--k\",String(Math.round(k*1e3)/1e3));r.sw.style.setProperty(\"--h\",\"0\");/* the goo group: knob plus a lagging tail blob, fused by the goo filter */const kx=6+26*pos;r.b1.style.cssText=`left:${(kx+1).toFixed(2)}px;top:7px;width:24px;height:24px;transform:scale(${(1+.5*sq).toFixed(3)},${(1-.2*sq).toFixed(3)});`;const tx=6+26*cl(tail.pos,-.1,1.12)+3;r.b2.style.cssText=`left:${(tx+1).toFixed(2)}px;top:10px;width:18px;height:18px;`;r.kn.style.transform=`translateX(${(26*pos).toFixed(2)}px) scaleX(${(1+.3*sq).toFixed(3)})`;/* the track fill washes in from the knob */const R=96*SOFT(cl(st.pos));r.wash.style.clipPath=`circle(${R.toFixed(2)}px at ${(19+26*pos).toFixed(2)}px 19px)`;const kk=SOFT(k);r.tick.style.opacity=String(kk);r.tick.style.transform=`rotate(${(-90*(1-kk)).toFixed(1)}deg)`;r.xi.style.opacity=String(1-kk);r.xi.style.transform=`rotate(${(-90*kk).toFixed(1)}deg)`;/* dominoes: each row tips over as its switch goes */const tilt=bump(t,ON[i]-40,520)-bump(t,OFF[i]-40,520);r.sw.style.transform=`perspective(560px) rotateX(${(-18*tilt).toFixed(2)}deg) scale(${(i===0?press(t,2e3,.9)*press(t,5520,.9):1).toFixed(4)})`;/* the tick pops with particles, from the knob's end of travel */const pk=(t-(ON[i]+150))/700;r.pts.forEach((p,n)=>{if(pk<=0||pk>=1){p.style.opacity=\"0\";return;}const a=n/8*Math.PI*2+hash(i*9+n)*.6,rad=(12+30*(.7+.5*hash(n+i*3)))*SOFT(pk);p.style.transform=`translate(${(Math.cos(a)*rad).toFixed(2)}px,${(Math.sin(a)*rad).toFixed(2)}px) scale(${(1-pk).toFixed(3)})`;p.style.opacity=String((1-pk*pk).toFixed(3));});ringDraw(r.ring,0);r.blur(bl(vel1(tt=>26*S*knob(i,tt,360,17).pos,t),100,80,4),0);});cur(t,cfg);};}};}/* ---------- 4. SLIDER, turned up ---------- */const SLIDER_UP_CSS=`\n.pc-sl.up .hg { position: absolute; top: 10px; width: 20px; height: 20px; border-radius: 50%; background: var(--trackfg); opacity: 0; }\n.pc-sl.up .tip { padding: 4px 6px; gap: 0; overflow: visible; transform-origin: 50% 100%; }\n`;export function mountSliderUp(){const LOOP=9e3;return{loop:LOOP,still:5200,css:SLIDER_CSS+SLIDER_UP_CSS,cam:camUp(LOOP,2.9,[1700,2400,5600,7e3],1.6,.06),build(g){const S=1.45,X0=(640-360*S)/2;const mkSl=(y,range)=>{const e=mkEl(\"div\",\"pc-sl up\",g);e.style.transform=`translate(${X0}px,${y}px) scale(${S})`;mkEl(\"div\",\"tr\",e);const fl=mkEl(\"div\",\"fl\",e);const ghosts=range?[]:Array.from({length:8},()=>mkEl(\"div\",\"hg\",e));const hs=(range?[0,1]:[0]).map(()=>{const h=mkEl(\"div\",\"hd\",e);const k=mkEl(\"div\",\"hk\",h);return{h,k,blur:mkBlur(k,SL_SHADOW)};});return{e,fl,hs,ghosts};};const Y1=150,Y2=292;const A=mkSl(Y1,false),B=mkSl(Y2,true);const hf=mkRing(A.hs[0].h,\"50%\");const tip=mkEl(\"div\",\"tip\",A.e);tip.style.opacity=\"0\";const cx=v=>10+v/100*340;const single=t=>mix(20+65*spr(t-1750,190,14),20,sstep((t-6200)/900));const rngLo=t=>t<4500?40:t<4800?40*(1-((t-4500)/300)**2):t<7e3?15*spr(t-4800,420,9):mix(15*spr(2200,420,9),40,sstep((t-7e3)/1e3));const rngHi=t=>t<4500?60:t<4800?60+40*((t-4500)/300)**2:t<7e3?100-15*spr(t-4800,420,9):mix(100-15*spr(2200,420,9),60,sstep((t-7e3)/1e3));const sx=v=>X0+S*cx(v);const hy=Y1+S*20;const v3=single(3500);const{cfg}=mkCurCfg(g,{loop:LOOP,arc:22,pts:[{t:500,x:0,y:0},{t:1300,x:sx(20),y:hy},{t:3500,x:sx(v3),y:hy},{t:3750,x:sx(v3),y:hy},{t:4300,x:sx(v3)+46,y:hy+40}],extra:[[1300,3500]],st:[{t:0,s:\"arrow\"},{t:1200,s:\"open\"},{t:1700,s:\"grab\"},{t:3500,s:\"open\"},{t:3750,s:\"arrow\"}],clicks:[{a:1700,b:3500}],pos:(t,base)=>t<1300?base(t):t<3500?{x:sx(single(t)),y:hy}:base(t)});const cur=mkCursorKit(g);const fillGlow=(s,gv)=>{s.fl.style.backgroundImage=`linear-gradient(90deg, var(--trackfg), color-mix(in srgb, var(--trackfg), var(--gl) ${(gv*100).toFixed(0)}%))`;s.fl.style.boxShadow=`0 0 ${(3+18*gv).toFixed(1)}px ${(gv*2).toFixed(1)}px color-mix(in srgb, var(--gl) ${(15+65*gv).toFixed(0)}%, transparent)`;};return t=>{const v1=single(t);A.hs[0].h.style.left=(cx(v1)-10).toFixed(2)+\"px\";A.fl.style.left=\"0px\";A.fl.style.width=cx(v1).toFixed(2)+\"px\";fillGlow(A,cl(v1/100));const dv=vel1(single,t);const sk=cl(Math.abs(dv)/70);A.hs[0].k.style.transform=`scaleX(${(1+.7*sk).toFixed(3)})`;A.ghosts.forEach((gh,n)=>{const gv=single(t-17*(n+1));gh.style.left=(cx(gv)-10).toFixed(2)+\"px\";gh.style.opacity=String((.5*(1-n/8)*sk).toFixed(3));gh.style.transform=`scale(${(1-.05*n).toFixed(3)})`;});const grab=ph(t,1700,1800,SOFT)*(1-ph(t,3500,3800,SOFT));A.hs[0].h.style.transform=`scale(${(1+.18*grab).toFixed(4)})`;ringDraw(hf,ph(t,1700,1800,SOFT),1-ph(t,3500,3800,SOFT));/* tooltip: the number just updates (tabular figures); each change gets a 120ms opacity cross-fade, derived from t so it stays seekable */const nv=Math.round(v1);let age=120;for(let k=8;k<=120;k+=8)if(Math.round(single(t-k))!==nv){age=k-4;break;}tip.textContent=String(nv);const tv=ph(t,1700,1900,SOFT)*(1-ph(t,3550,3900,SOFT));tip.style.opacity=String((tv*(.8+.2*cl(age/120))).toFixed(3));tip.style.transform=`translateX(${(cx(v1)-17).toFixed(2)}px)`;/* range handles fly apart, bounce off the ends, settle */const lo=rngLo(t),hi=rngHi(t);B.hs[0].h.style.left=(cx(lo)-10).toFixed(2)+\"px\";B.hs[1].h.style.left=(cx(hi)-10).toFixed(2)+\"px\";B.fl.style.left=cx(lo).toFixed(2)+\"px\";B.fl.style.width=Math.max(0,cx(hi)-cx(lo)).toFixed(2)+\"px\";fillGlow(B,cl((hi-lo)/100));const hit=t0=>t>=t0&&tS*cx(single(tt)),t),200,260,5),0);B.hs[0].blur(bl(vel1(tt=>S*cx(rngLo(tt)),t),200,260,5),0);B.hs[1].blur(bl(vel1(tt=>S*cx(rngHi(tt)),t),200,260,5),0);cur(t,cfg);};}};}const BUTTON_UP_CSS=`\n.pc-bt-m { grid-area: 1 / 1; position: relative; height: 44px; }\n.pc-bt .swp { position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: linear-gradient(100deg, transparent 40%, rgb(255 255 255 / .26) 50%, transparent 60%); background-size: 260% 100%; background-repeat: no-repeat; opacity: 0; }\n.pc-shock, .pc-pr { position: absolute; box-sizing: border-box; border: 3px solid var(--btn); opacity: 0; pointer-events: none; }\n/* v24: every click ring is a true offset outline of the 44px pill: inset -d, border-radius 22px + d (the button's radius plus the offset), so the gap is equal all round at every moment. d runs 4 to --dm (the room the card allows, set by the showcase; 82 by default). No scale is ever used on a ring, as scale would distort the radius. */\n.pc-shock { --d: calc(4 + (var(--dm, 82) - 4) * var(--q, 0)); inset: calc(-1px * var(--d)); border-radius: calc(22px + 1px * var(--d)); }\n.pc-pr { --d: calc(var(--q, 0) * min(14, var(--dm, 82))); border-width: 1.5px; inset: calc(-1px * var(--d)); border-radius: calc(22px + 1px * var(--d)); }\n.pc-shock.y { border-color: var(--amb); }\n.pc-pop { position: absolute; left: 0; top: 0; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; opacity: 0; pointer-events: none; }\n.pc-bt .ic { transform-origin: 50% 50%; }\n`;/* ---------- 5. PRIMARY BUTTON: Continue morphs into Start lesson (v12) ----------\n One pill. 1 Continue appears; 2 it shows the keyboard focus ring; 3 the cursor clicks it (Material / Pearson ring ripple);\n 4 it morphs into the yellow Start lesson (fill mixes, labels cross-fade in place, width tweens); 5 the cursor hovers it: the fill changes colour, nothing radiates;\n 6 the cursor clicks it: the full pulse (turned: shock rings, light sweep, confetti; standard: the pulse ring); 7 hold, exit. Nothing that carries text moves. */const BUTTON_MORPH_CSS=`\n.pc-bt-m { grid-area: 1 / 1; position: relative; height: 44px; }\n.pc-bt-t.mo { position: relative; height: 44px; border-radius: 1000px; transform-origin: 50% 50%; }\n.pc-bt.mo { position: absolute; inset: 0; padding: 0; display: block; overflow: hidden; }\n.pc-bt.mo .bgl { background-color: color-mix(in srgb, color-mix(in srgb, color-mix(in srgb, var(--btn), var(--btnh) calc(var(--h) * 100%)), var(--btnp) calc(var(--p) * 100%)),\n color-mix(in srgb, color-mix(in srgb, var(--amb), var(--ambh) calc(var(--h2) * 100%)), var(--ambp) calc(var(--p2) * 100%)) calc(var(--m) * 100%)); }\n.pc-bt.mo .cA, .pc-bt.mo .cY { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; }\n.pc-bt.mo .cA { color: var(--btnfg); } .pc-bt.mo .cY { color: var(--ambfg); }\n`;/* v19 (the reel's two button pieces). part \"cont\": Continue appears (0-500), shows its focus ring (650-1150), the cursor presses it (T1: the Material ring ripple), a hold, then it morphs into Start lesson (MO0 to MO1) and the clock ends on a held Start lesson at rest: no exit, no cursor.\n part \"start\": the same timeline from MO1 on (its clock 0 = 3750), so it opens on the identical held Start lesson at rest: the cursor comes in, hovers it (the fill changes colour, nothing else), clicks (the full pulse, shock rings and confetti), and leaves.\n The reel plays \"cont\" last and \"start\" first, so the loop seam is one button that has just finished morphing. The camera is continuous across it (start's camera continues cont's at the same moment). */function mkButtonSeq(turned,part){const LOOP=8200;const OFF=part===\"start\"?3750:0/* the part's clock 0 in the full timeline */;const T1=2250,MO0=2950,MO1=3750,HOV=3800,T2=4600,EXIT=7e3;const HOVT=part===\"start\"?4200:part===\"cont\"?1e9:HOV;const camB=camStd(LOOP,4.3,part===\"start\"?[-9999,-9998,4550+1700,4550+2700]:[1200,1900,5400,6400],turned?2.1:1,turned?.12:.04);return{loop:part===\"start\"?4450:part===\"cont\"?4600:LOOP,still:part===\"start\"?2100:part===\"cont\"?4e3:5900,css:BUTTON_CSS+BUTTON_UP_CSS+BUTTON_MORPH_CSS+RIPPLE_CSS,cam:part===\"start\"?t=>camB(t+4550):camB,build(g){const S=2.4,WA=151,WY=170;const wrap=mkEl(\"div\",\"pc-bt-wrap\",g);wrap.style.transform=`translate(${(640-200*S)/2}px,${(480-44*S)/2}px) scale(${S})`;/* the confetti sits behind the button (earlier in the DOM, lower z-index than the button and its label) and leaves from the button's edge, away from it */const POPC=[\"var(--amb)\",\"var(--brand)\",\"var(--turquoise)\",\"var(--fuchsia)\"];const pops=turned?Array.from({length:12},(_,n)=>{const e=mkEl(\"div\",\"pc-pop\",wrap);e.style.background=POPC[n%4];e.style.left=\"100px\";e.style.top=\"22px\";e.style.zIndex=\"0\";return e;}):[];const m=mkEl(\"div\",\"pc-bt-m\",wrap);m.style.zIndex=\"1\";const t=mkEl(\"div\",\"pc-bt-t mo\",m);const lay=(cls,label)=>`
${label}
${ARROW_ICON()}
`;const b=mkEl(\"div\",\"pc-bt mo\",t,`
${lay(\"cA\",\"Continue\")}${lay(\"cY\",\"Start lesson\")}
`);const bg=b.querySelector(\".bgl\"),cA=b.querySelector(\".cA\"),cY=b.querySelector(\".cY\");const icA=cA.querySelector(\".ic\"),icY=cY.querySelector(\".ic\"),sw=b.querySelector(\".swp\");const pulse=mkEl(\"div\",\"pc-pulse y\",t);const s1=mkEl(\"div\",\"pc-shock y\",t),s2=mkEl(\"div\",\"pc-shock y\",t);const ring=mkRing(t,22);const prs=Array.from({length:RP_N},()=>mkEl(\"div\",\"pc-pr\",t));const bx=320,by=240;const tipA={x:bx+40,y:by+4},tipY={x:bx+54,y:by+8},restB={x:tipY.x+46,y:tipY.y+42};const cur=mkCursorKit(g);const pts=part===\"cont\"?[{t:1350,x:0,y:0},{t:1900,...tipA},{t:3300,...tipA}]:part===\"start\"?[{t:3950,x:0,y:0},{t:4200,...tipY},{t:4700,...tipY},{t:5250,...restB}]:[{t:1350,x:0,y:0},{t:1900,...tipA},{t:3300,...tipA},{t:HOV,...tipY},{t:4700,...tipY},{t:5250,...restB}];const{cfg}=mkCurCfg(g,{loop:LOOP,pts,extra:part?undefined:[[T1,4e3]],/* v18: lead-in cut, first press within ~700ms of the clock starting */st:part===\"start\"?[{t:0,s:\"point\"},{t:4800,s:\"arrow\"}]:[{t:0,s:\"arrow\"},{t:1750,s:\"point\"},...part?[]:[{t:4800,s:\"arrow\"}]],clicks:part===\"cont\"?[{a:T1,b:T1+80}]:part===\"start\"?[{a:T2,b:T2+80}]:[{a:T1,b:T1+80},{a:T2,b:T2+80}]});if(OFF){const c0=g.__curLast;g.__curLast={last:c0.last,tOut:c0.tOut-OFF,tIn:c0.tIn-OFF,outAt:m=>c0.outAt(m+OFF)-OFF};}/* the cursor's times are in the full timeline; the reel asks in the part's own clock *//* v24: no wobble. Nothing moves before the press; on the press the button does one slight press (scale 0.975 over 100ms, then back) and nothing else: no lean, no arrow flight, no rotation, no overshoot. */const lo=.975;const pressB=(tt,t0)=>tt{const tt=t0+OFF;const ap=ph(tt,0,500,SOFT),mo=ph(tt,MO0,MO1,SOFT),yOut=part?0:ph(tt,EXIT,EXIT+600,SOFT);t.style.opacity=String(ap*(1-yOut));t.style.width=`${mix(WA,WY,mo).toFixed(2)}px`;t.style.transform=`scale(${(mix(.96,1,ap)*pressB(tt,T1)*pressB(tt,T2)).toFixed(4)})`;/* the press scales the whole pill, so its rings (children of it) stay concentric */const hA=ph(tt,1850,2e3,SOFT)*(1-ph(tt,MO0,MO0+350,SOFT)),hY=ph(tt,HOVT,HOVT+150,SOFT)*(1-ph(tt,5200,5600,SOFT));const pA=(tt>=T1?1:0)*(1-ph(tt,T1+90,T1+420,OQ))*(tt<2700?1:0);const pY=(part===\"cont\"?0:tt>=T2?1:0)*(1-ph(tt,T2+90,T2+420,OQ))*(tt{const k=(tt-T1-RP_STAG*i)/RP_DUR;if(k<=0||k>=1.9){e.style.opacity=\"0\";return;}const q=1-Math.pow(1-cl(k),3),fade=1-cl((tt-T1-90-RP_STAG*i)/RP_FADE);e.style.setProperty(\"--q\",(q*(1-.14*i)).toFixed(4));e.style.opacity=(.75*fade*(1-.17*i)).toFixed(3);});/* the click: the full pulse */if(turned){const shock=(e,t0,w)=>{const k=(tt-t0)/900;if(k<=0||k>=1){e.style.opacity=\"0\";return;}const q=SOFT(k);e.style.setProperty(\"--q\",q.toFixed(4));e.style.opacity=((1-k)*.9).toFixed(3);e.style.borderWidth=`${(w*(1-k)+.6).toFixed(2)}px`;};shock(s1,T2,4);shock(s2,T2+130,2.5);const sweep=t0=>{const k=(tt-t0)/650;if(k<=0||k>=1)return 0;sw.style.backgroundPosition=`${((1-SOFT(k))*100).toFixed(1)}% 0`;return 1;};sw.style.opacity=String(Math.max(sweep(T1+40),sweep(T2+40)));pops.forEach((p,n)=>{const k=(tt-(T2+80))/800;if(k<=0||k>=1){p.style.opacity=\"0\";return;}/* from the edge of the 170 x 44 pill (half 85 x 22; the end caps are r=22 circles), outward and away; the first part is hidden behind the button */const a=n/12*Math.PI*2+.3*hash(n),dx=Math.cos(a),dy=Math.sin(a);let e=0;for(let q=4;q<120;q+=1){const px=dx*q,py=dy*q,cx=Math.max(-63,Math.min(63,px));if(Math.hypot(px-cx,py)>22){e=q;break;}}const dist=e-4+(30+26*hash(n+3))*OQ(k);p.style.transform=`translate(${(dx*dist).toFixed(1)}px,${(dy*dist).toFixed(1)}px) scale(${(1-k*.85).toFixed(3)})`;p.style.opacity=(k<.7?1:1-(k-.7)/.3).toFixed(3);});}else{const k=ph(tt,T2+90,T2+790,SOFT);pulse.style.inset=`${(-9*k).toFixed(2)}px`;pulse.style.opacity=String(k>0&&k<1?.6*(1-k):0);}ringDraw(ring,ph(tt,650,1150,SOFT),1-ph(tt,2200,2450,SOFT));cur(tt,cfg);};}};}export function mountButtonUp(){return mkButtonSeq(true);}export function mountButtonPart(part){return mkButtonSeq(true,part);}/* ---------- 6. TEXT INPUT, turned up ---------- */const INPUT_UP_CSS=`\n.pc-in.up .fb { overflow: visible; }\n.pc-in.up .fd { overflow: visible; }\n.pc-in.up .ch { display: inline-block; white-space: pre; }\n.pc-in.up .pt { position: absolute; left: 8px; top: 8px; width: 0; height: 0; }\n.pc-in.up .pt i { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; opacity: 0; border-radius: 50%; background: var(--okb); }\n`;export function mountInputUp(){const LOOP=9e3;return{loop:LOOP,still:6200,css:INPUT_CSS+INPUT_UP_CSS,cam:camUp(LOOP,5.1,[900,1700,6600,7800],2.3,.1),build(g){const S=1.6,X0=(640-340*S)/2;const z=mkEl(\"div\",\"pc-z pc-in up\",g);mkEl(\"div\",\"lb\",z,\"School email\");mkEl(\"div\",\"hp\",z,\"We'll send your class code here\");const fb=mkEl(\"div\",\"fb\",z);const fbi=mkEl(\"div\",\"fbi\",fb,FEEDBACK_HTML);const icWrap=fbi.querySelector(\".ic\");icWrap.innerHTML=`
${svg(16,ICON_ALERT)}
\n
\n
${[0,1,2,3,4,5,6,7,8,9].map(()=>\"\").join(\"\")}
`;const iaE=icWrap.children[0],ioE=icWrap.children[1];const circ=ioE.querySelector(\"circle\"),chk=ioE.querySelector(\"path\");const pts=Array.from(icWrap.querySelectorAll(\".pt i\"));const te=fbi.querySelector(\".te\"),tg=fbi.querySelector(\".tg\");te.style.color=\"var(--errfg)\";tg.style.color=\"var(--okfg)\";const fw=mkEl(\"div\",\"fw\",z);const fd=mkEl(\"div\",\"fd\",fw);const FULL=\"sam@school.ac.uk\";const chars=FULL.split(\"\").map(c=>mkEl(\"span\",\"ch\",fd,c===\" \"?\" \":c));const car=mkEl(\"span\",\"car\",fd);const rg=mkRing(fd,4,1);const ti=i=>i<10?1200+55*i:4500+55*(i-10);const td=i=>7e3+22*(15-i);const cur=mkCursorKit(g);const Yb=(480-(16+4+22.4+8+33.6+8+51.6)*S)/2;const fx=X0+S*40,fy=Yb+S*(16+4+22.4+8+33.6+8+26);/* the re-edit click goes to the END of the text: the I-beam lands just after the last typed character (measured), and the caret appears there */const meas=mkEl(\"span\",\"\",fd,\"sam@school\");meas.style.cssText=\"position:absolute;left:12px;top:0;visibility:hidden;white-space:pre;pointer-events:none\";const txL=X0+S*13;const cps=[{t:300,x:0,y:0},{t:780,x:txL+6,y:fy},{t:1100,x:txL+6,y:fy},{t:3900,x:txL+6,y:fy},{t:4250,x:txL+S*100.5,y:fy},{t:4440,x:txL+S*100.5,y:fy}];const{cfg}=mkCurCfg(g,{loop:LOOP,arc:20,pts:cps,st:[{t:0,s:\"arrow\"},{t:650,s:\"ibeam\"}],clicks:[{a:880,b:960},{a:4340,b:4420}],cut:4440,last:{x:txL+S*100.5,y:fy}});/* v3: a small 4px horizontal shake of the field box; the text moves with the box and nothing rotates, skews or glitches */const shakeF=t=>t>=2400&&t<2900?4*Math.sin(2*Math.PI*(t-2400)/110)*Math.exp(-(t-2400)/150):0;return t=>{/* characters appear as typed and are removed as deleted: no drop, bounce or fade */chars.forEach((c,i)=>{c.style.display=t-ti(i)<0||t-td(i)>=0?\"none\":\"inline-block\";});const f1=ph(t,700,1e3,SOFT)*(1-ph(t,2300,2550,SOFT));const f2_=ph(t,4200,4450,SOFT)*(1-ph(t,5200,5450,SOFT));const f3=ph(t,6900,7e3,SOFT)*(1-ph(t,7300,7500,SOFT));const f=Math.max(f1,f2_,f3);const ok=ph(t,5e3,5600,SOFT)*(1-ph(t,7500,8200,SOFT));const er=ph(t,2350,2750,SOFT)*(1-ph(t,5e3,5500,SOFT));const fbv=ph(t,2350,2800,SOFT)*(1-ph(t,7500,8e3,SOFT));const th=Math.max(er,ok);const bf=f*(th>.01?0:1);setK(fd,{\"--f\":bf,\"--e\":er,\"--o\":ok,\"--a\":Math.max(bf,th),\"--th\":th});const sh=shakeF(t);fd.style.transform=`translateX(${sh.toFixed(2)}px)`;/* focus ring: grows out from the field with a little overshoot, concentric all the way */const gap=RING_GAP*f*(1+.45*Math.sin(Math.PI*cl((f-.2)/.8))*(f<1?1:0));rg.style.opacity=String(cl(f*1.4));rg.style.inset=`-${(1+gap+RING_W).toFixed(2)}px`;rg.style.borderRadius=`${(4+gap+RING_W).toFixed(2)}px`;const typing=t>=1200&&t<1850||t>=4500&&t<4970||t>=7e3&&t<7320;car.style.opacity=f>.5&&(typing||Math.floor(t/530)%2===0)?\"1\":\"0\";const osh=ph(t,5e3,5300,SOFT)*(1-ph(t,6200,6900,SOFT));fd.style.setProperty(\"--os\",osh.toFixed(3));fbi.style.opacity=String(fbv);const popA=spr(t-2450,380,11)*(1-ph(t,5e3,5300,SOFT));iaE.style.transform=`scale(${mix(.2,1,popA).toFixed(3)}) rotate(${((1-cl(popA))*-25).toFixed(1)}deg)`;iaE.style.opacity=String(cl(popA*3)*(1-ph(t,5e3,5300,SOFT)));ioE.style.opacity=String(t>=5100?1:0);circ.setAttribute(\"stroke-dashoffset\",String((1-ph(t,5100,5420,SOFT)).toFixed(3)));chk.setAttribute(\"stroke-dashoffset\",String((1-ph(t,5380,5640,SOFT)).toFixed(3)));ioE.style.transform=`scale(${(1+.35*bump(t,5380,420)).toFixed(3)})`;/* success burst: ten dots leave the check's edge and travel clearly outward (14 to 22px) with ease-out, shrinking and fading */const pk=(t-5560)/800;pts.forEach((p,j)=>{if(pk<=0||pk>=1){p.style.opacity=\"0\";return;}const a=j/10*Math.PI*2+.3,rad=7+(14+8*hash(j))*OQ(pk);p.style.transform=`translate(${(Math.cos(a)*rad).toFixed(2)}px,${(Math.sin(a)*rad).toFixed(2)}px) scale(${(1-.5*SOFT(pk)).toFixed(3)})`;p.style.opacity=(pk<.45?1:1-(pk-.45)/.55).toFixed(3);});te.style.opacity=String(1-ph(t,5e3,5400,SOFT));tg.style.opacity=String(ph(t,5200,5600,SOFT));z.style.transform=`translate(${X0}px,${Yb}px) scale(${S})`;if(t>3500&&t<5e3){const ex=txL+S*(meas.offsetWidth+2.5);cps[4].x=ex;cps[5].x=ex;}cur(t,cfg);};}};}/* ---------- 1. DATA VISUALISATION, turned up ---------- *//* the toolkit's Segmented Control (Navigation / Segmented Control, 3874:86021 light / 3874:86035 dark): a track, a selected pill that glides, labels that cross-fade as the pill passes under them */const SEG_CSS=`\n.pc-seg { position: absolute; padding: 4px; border-radius: 12px; background: var(--track); display: flex; gap: 4px; }\n.pc-seg .it { position: relative; z-index: 2; flex: 1 1 0; display: flex; align-items: center; justify-content: center; padding: 8px 16px; border-radius: 8px; font-weight: 500; line-height: 1; white-space: nowrap; height: 42px; font-size: 16px;\n color: color-mix(in srgb, var(--ink), var(--pillfg) calc(var(--k, 0) * 100%)); }\n.pc-seg .pill { position: absolute; z-index: 1; top: 4px; bottom: 4px; border-radius: 8px; background-color: var(--pillbrand); }\n`;const VIZ_UP_CSS=`\n.pc-vz-sw { position: absolute; pointer-events: none; z-index: 20; }\n.pc-vz-d.grp { transform-origin: 50% 0; }\n.pc-vz-d.grp .nm { display: none; }\n${SEG_CSS}\n`;/* the chart group (showcase slot data-part=\"group\"): donuts above bars, one composition centred on x 320, the 80% donut prominent, and a Solid / Patterns control beneath.\n Solid first (the donuts sweep in and the bars grow), a hold, then the cursor clicks Patterns, the pill glides and the patterns wipe in on the donuts and bars together, and stay. */const VG={D:[150,100,100,100],gap:24,cy:99,bw:68,ch:132,base:340,w:522,segW:280,segTop:370,click:4150,wipe0:4400,wipe1:5800};export function mountVizUp(){const LOOP=9400;let grp=false;/* v3: the orbit stays, but slower and smaller (+-6deg max) so the numbers stay readable. The chart group stays square on: it has a control to click and text that must stay crisp */const camera=t=>{if(grp)return{ry:0,rx:0,sc:1};const a=ph(t,2700,5600,SOFT)*(1-ph(t,6600,9200,SOFT));return{ry:-5.5*a,rx:2.5*a,sc:1-.02*a};};return{loop:LOOP,still:6e3,css:VIZ_CSS+VIZ_UP_CSS,cam:camera,build(g){grp=g.closest(\".pcs-slot\")?.getAttribute(\"data-part\")===\"group\";const defsId=\"vzu\"+ ++uid;const gtot=VG.D.reduce((a,b)=>a+b,0)+3*VG.gap;const gc=(()=>{let x=320-gtot/2;return VG.D.map(d=>{const c=x+d/2;x+=d+VG.gap;return c;});})();const donuts=HUES.map((hu,i)=>{const dw=grp?VG.D[i]:135,x=grp?gc[i]-dw/2:20+i*(135+20);const d=mkEl(\"div\",\"pc-vz-d\",g);if(grp){const sc=dw/135;d.classList.add(\"grp\");d.style.left=(gc[i]-67.5).toFixed(2)+\"px\";d.style.top=(VG.cy-67.5*sc).toFixed(2)+\"px\";d.style.transform=`scale(${sc.toFixed(4)})`;}else d.style.left=x+\"px\";mkEl(\"div\",\"nm\",d,hu.name);const ring=mkEl(\"div\",\"ring\",d);const fid=defsId+\"f\"+i,fh=defsId+\"h\"+i,pid=defsId+\"p\"+i,cid=defsId+\"c\"+i;const arc=`stroke-width=\"18\" fill=\"none\" transform=\"rotate(-90 90 90)\"`;ring.innerHTML=`\n \n \n ${patternDefs(pid,hu.pat,1,hu.patc)}\n \n \n \n \n \n \n \n `;const tx=mkEl(\"div\",\"pctx\",ring,\"0%\");const q=c=>ring.querySelector(\".\"+c);return{x,dw,tx,sp:q(\"sp\"),sol:q(\"sol\"),bm:q(\"bm\"),tr:[q(\"t1\"),q(\"t2\"),q(\"t3\")],hd:q(\"hd\"),pb:q(\"pb\"),pp:q(\"pp\"),pg:q(\"pg\"),cr:q(\"cr\"),hu};});const CH=grp?VG.ch:230,BASE=grp?VG.base:440,BW=grp?VG.bw:84,BX0=grp?320-VG.w/2:20,BG=((grp?VG.w:600)-6*BW)/5;const barBits=[];/* gridlines and number labels: shown with the bars only */for(let i=0;i<5;i++)barBits.push(mkEl(\"div\",\"pc-vz-g\",g,\"\",`top:${BASE-CH*i/4}px`+(grp?`;left:${BX0}px;width:${VG.w}px`:\"\")));const bars=BAR_H.map((hr,i)=>{const x=BX0+i*(BW+BG);const b=mkEl(\"div\",\"pc-vz-b\",g);b.style.left=x+\"px\";b.style.width=BW+\"px\";b.style.backgroundColor=AMETHYST_RAMP[i];const pid=\"vzq\"+ ++uid;const ov=mkEl(\"div\",\"\",b);ov.style.cssText=\"position:absolute;inset:0;\";ov.innerHTML=`${patternDefs(pid,BAR_PAT[i],.6,\"rgba(255,255,255,.4)\")}`;if(!grp)barBits.push(mkEl(\"div\",\"pc-vz-l\",g,String(i+1).padStart(2,\"0\"),`left:${x+BW/2-15}px;top:${BASE+9}px`));return{b,ov,x,blur:mkBlur(b)};});/* the chart group's Solid / Patterns control, its pill, and the cursor that clicks Patterns */let seg=null,upSeg=null,curG=null;if(grp){const SEGN=[\"Solid\",\"Patterns\"],IW=(VG.segW-8-4)/2,xs=i=>4+i*(IW+4),sx0=320-VG.segW/2;seg=mkEl(\"div\",\"pc-seg\",g);seg.style.cssText=`left:${sx0}px;top:${VG.segTop}px;width:${VG.segW}px;opacity:0`;const pill=mkEl(\"div\",\"pill sh\",seg),its=SEGN.map(n=>mkEl(\"div\",\"it\",seg,n)),pb=mkBlur(pill);const moves=[{t:0,i:0},{t:VG.click+30,i:1}];const edges=t=>{let a=0,b=0,t0=-1e9;for(let n=0;n=moves[n].t){b=n>0?moves[n-1].i:moves[0].i;a=moves[n].i;t0=moves[n].t;}const L0=xs(b),R0=xs(b)+IW,L1=xs(a),R1=xs(a)+IW,right=a>b;const lead=spr(t-t0,420,27),trail=spr(t-t0-50,200,20);return{L:mix(L0,L1,right?trail:lead),R:mix(R0,R1,right?lead:trail)};};upSeg=t=>{seg.style.opacity=ph(t,1900,2600,SOFT).toFixed(3);const{L,R}=edges(t);pill.style.left=L.toFixed(2)+\"px\";pill.style.width=Math.max(0,R-L).toFixed(2)+\"px\";its.forEach((it,i)=>{const a=xs(i),b=a+IW,o=cl((Math.min(R,b)-Math.max(L,a))/IW);setK(it,{\"--k\":SOFT(cl((o-.4)/.4))});});pb(bl(vel1(tt=>(edges(tt).L+edges(tt).R)*.5,t),500,330,6),0);};/* the cursor arrives from where it was last seen, hovers Patterns, clicks, and leaves down and to the right */const tg={x:sx0+xs(1)+IW*.5-8,y:VG.segTop+4+21-6},rest={x:tg.x+62,y:tg.y+46};const{cfg}=mkCurCfg(g,{loop:LOOP,arc:24,pts:[{t:3550,x:0,y:0},{t:4100,...tg},{t:VG.click+90,...tg},{t:4880,...rest}],st:[{t:0,s:\"arrow\"},{t:3980,s:\"point\"},{t:4420,s:\"arrow\"}],clicks:[{a:VG.click,b:VG.click+80}]});const cur=mkCursorKit(g);curG=t=>cur(t,cfg);}/* the showcase reel plays the donuts and the bars as separate segments (or, for the chart group, together): data-part on the slot hides the other half */let part=\"\";const setPart=()=>{const p=g.closest(\".pcs-slot\")?.getAttribute(\"data-part\")||\"\";if(p===part)return;part=p;donuts.forEach(d=>d.tx.closest(\".pc-vz-d\").style.visibility=p===\"bars\"?\"hidden\":\"visible\");bars.forEach(b=>b.b.style.visibility=p===\"donuts\"?\"hidden\":\"visible\");barBits.forEach(e=>e.style.visibility=p===\"donuts\"?\"hidden\":\"visible\");};const arcP=(i,t)=>{const t0=300+140*i;const e=spr(t-t0,190,13),unw=ph(t,7500+80*i,8500+80*i,SOFT);return{p:HUES[i].pct/100*e*(1-unw),e,lin:cl(e),unw,t0};};const hf=(i,t)=>BAR_H[i]*CH*spr(t-(2400+i*85),170,10)*(1-ph(t,7500+(5-i)*60,8500+(5-i)*60,SOFT));return t=>{setPart();const Wp=grp?40+600*ph(t,VG.wipe0,VG.wipe1,SOFT):640*ph(t,3600,5e3,SOFT),patOp=1-ph(t,6900,7500,SOFT);donuts.forEach((d,i)=>{const{p,lin,unw,t0}=arcP(i,t);const len=DC*Math.max(0,p);const da=`${len.toFixed(2)} ${DC.toFixed(2)}`;[d.sol,d.bm,d.pb,d.pp].forEach(c=>c.setAttribute(\"stroke-dasharray\",da));d.sol.style.opacity=p<.003?\"0\":\"1\";/* toolkit pattern fills on the arcs: wipe in left to right like the Standard version, then stay completely static (outside the spinning group) */d.cr.setAttribute(\"width\",String(cl((Wp-d.x)/d.dw)*200));d.pg.setAttribute(\"opacity\",p<.003?\"0\":String(patOp.toFixed(3)));d.tx.textContent=Math.round(d.hu.pct*lin*(1-unw))+\"%\";/* spin-up */const spin=-420*(1-SOFT(cl((t-t0)/1300)))*(1-unw)-360*unw;d.sp.setAttribute(\"transform\",`rotate(${spin.toFixed(2)} 90 90)`);/* light trail and a glowing head on the arc head, sized by its speed */const sp=vel1(tt=>arcP(i,tt).p,t)*DC*DS;const k=cl((Math.abs(sp)-60)/360),dir=sp>=0?1:-1;[1,.66,.36].forEach((m,n)=>{const L=Math.min(len,120*k*m);d.tr[n].setAttribute(\"stroke-dasharray\",`${L.toFixed(2)} ${DC.toFixed(2)}`);d.tr[n].setAttribute(\"stroke-dashoffset\",String(-(dir>0?len-L:len)));d.tr[n].setAttribute(\"opacity\",String((p>.003?.3*k:0).toFixed(3)));});const th=-Math.PI/2+len/DC*Math.PI*2;d.hd.setAttribute(\"cx\",(90+81*Math.cos(th)).toFixed(2));d.hd.setAttribute(\"cy\",(90+81*Math.sin(th)).toFixed(2));d.hd.setAttribute(\"opacity\",String((p>.003?.95*k:0).toFixed(3)));/* soft bloom behind the arc for the landing: the 80% gets the full glow, the rest a lighter pass */const tg=1050+300*i,full=i===0?1:.55;const bk=(t-(tg-100))/1300;d.bm.setAttribute(\"opacity\",String(bk>0&&bk<1?(Math.sin(Math.PI*bk)*.85*full).toFixed(3):\"0\"));});bars.forEach((b,i)=>{const h=Math.max(0,hf(i,t));b.b.style.top=(BASE-h).toFixed(2)+\"px\";b.b.style.height=h.toFixed(2)+\"px\";b.b.style.opacity=h<.5?\"0\":\"1\";/* patterns wipe in left to right once the bars have landed, then stay completely static; they fade out on the unwind */b.ov.style.clipPath=`inset(0 ${((1-cl((Wp-b.x)/BW))*100).toFixed(2)}% 0 0)`;b.ov.style.opacity=String(patOp);b.blur(0,bl(vel1(tt=>hf(i,tt),t),300,450,7));});upSeg?.(t);curG?.(t);};}};}/* generated by roster2-assets/gen.py: Pearson pictogram sprites (3x4 cells of 300x256), line-drawing arc data, toolkit date icons */const DT_ICONS={\"dprev\":[\"M1.38274 8.38116L7.50628 2.25761C7.84799 1.91591 8.40201 1.91591 8.74372 2.25761C9.08543 2.59932 9.08543 3.15334 8.74372 3.49505L3.23889 8.99988L8.74372 14.5047C9.08543 14.8464 9.08543 15.4004 8.74372 15.7421C8.40201 16.0838 7.84799 16.0838 7.50628 15.7421L1.38274 9.6186C1.04103 9.27689 1.04103 8.72287 1.38274 8.38116Z\",\"M9.25628 8.38116L15.3798 2.25761C15.7215 1.91591 16.2756 1.91591 16.6173 2.25761C16.959 2.59932 16.959 3.15334 16.6173 3.49505L11.1124 8.99988L16.6173 14.5047C16.959 14.8464 16.959 15.4004 16.6173 15.7421C16.2756 16.0838 15.7215 16.0838 15.3798 15.7421L9.25628 9.6186C8.91457 9.27689 8.91457 8.72287 9.25628 8.38116Z\"],\"prev\":[\"M4.31951 8.38128L10.4431 2.25774C10.7848 1.91603 11.3388 1.91603 11.6805 2.25774C12.0222 2.59945 12.0222 3.15346 11.6805 3.49517L6.17566 9L11.6805 14.5048C12.0222 14.8465 12.0222 15.4006 11.6805 15.7423C11.3388 16.084 10.7848 16.084 10.4431 15.7423L4.31951 9.61872C3.9778 9.27701 3.9778 8.72299 4.31951 8.38128Z\"],\"next\":[\"M13.6805 8.38128L7.55695 2.25774C7.21524 1.91603 6.66122 1.91603 6.31951 2.25774C5.9778 2.59945 5.9778 3.15346 6.31951 3.49517L11.8243 9L6.31951 14.5048C5.9778 14.8465 5.9778 15.4006 6.31951 15.7423C6.66122 16.084 7.21524 16.084 7.55695 15.7423L13.6805 9.61872C14.0222 9.27701 14.0222 8.72299 13.6805 8.38128Z\"],\"dnext\":[\"M8.74372 8.38122L2.62017 2.25768C2.27847 1.91597 1.72445 1.91597 1.38274 2.25768C1.04103 2.59938 1.04103 3.1534 1.38274 3.49511L6.88756 8.99994L1.38274 14.5048C1.04103 14.8465 1.04103 15.4005 1.38274 15.7422C1.72445 16.0839 2.27847 16.0839 2.62017 15.7422L8.74372 9.61866C9.08543 9.27695 9.08543 8.72293 8.74372 8.38122Z\",\"M16.6173 8.38122L10.4937 2.25768C10.152 1.91597 9.59799 1.91597 9.25628 2.25768C8.91457 2.59938 8.91457 3.1534 9.25628 3.49511L14.7611 8.99994L9.25628 14.5048C8.91457 14.8465 8.91457 15.4005 9.25628 15.7422C9.59799 16.0839 10.152 16.0839 10.4937 15.7422L16.6173 9.61866C16.959 9.27695 16.959 8.72293 16.6173 8.38122Z\"],\"cal\":[\"M13 0.999939C13.6531 0.999939 14.2087 1.41734 14.4146 1.99994H14.875C16.0486 1.99994 17 2.95133 17 4.12494V14.8749C17 16.0485 16.0486 16.9999 14.875 16.9999H3.125C1.95139 16.9999 1 16.0485 1 14.8749V4.12494C1 2.95133 1.95139 1.99994 3.125 1.99994H3.58535C3.79127 1.41734 4.34689 0.999939 5 0.999939C5.65311 0.999939 6.20873 1.41734 6.41465 1.99994H11.5854C11.7913 1.41734 12.3469 0.999939 13 0.999939ZM15.25 7.99994H2.75V14.8749C2.75 15.0562 2.87854 15.2074 3.04942 15.2423L3.125 15.2499H14.875C15.0562 15.2499 15.2074 15.1214 15.2424 14.9505L15.25 14.8749V7.99994ZM13.5 11.9999C13.7761 11.9999 14 12.2238 14 12.4999V13.4999C14 13.7761 13.7761 13.9999 13.5 13.9999H12.5C12.2239 13.9999 12 13.7761 12 13.4999V12.4999C12 12.2238 12.2239 11.9999 12.5 11.9999H13.5ZM10.5 11.9999C10.7761 11.9999 11 12.2238 11 12.4999V13.4999C11 13.7761 10.7761 13.9999 10.5 13.9999H9.5C9.22386 13.9999 9 13.7761 9 13.4999V12.4999C9 12.2238 9.22386 11.9999 9.5 11.9999H10.5ZM7.5 11.9999C7.77614 11.9999 8 12.2238 8 12.4999V13.4999C8 13.7761 7.77614 13.9999 7.5 13.9999H6.5C6.22386 13.9999 6 13.7761 6 13.4999V12.4999C6 12.2238 6.22386 11.9999 6.5 11.9999H7.5ZM13.5 8.99994C13.7761 8.99994 14 9.2238 14 9.49994V10.4999C14 10.7761 13.7761 10.9999 13.5 10.9999H12.5C12.2239 10.9999 12 10.7761 12 10.4999V9.49994C12 9.2238 12.2239 8.99994 12.5 8.99994H13.5ZM10.5 8.99994C10.7761 8.99994 11 9.2238 11 9.49994V10.4999C11 10.7761 10.7761 10.9999 10.5 10.9999H9.5C9.22386 10.9999 9 10.7761 9 10.4999V9.49994C9 9.2238 9.22386 8.99994 9.5 8.99994H10.5ZM14.875 3.74994H3.125C2.94378 3.74994 2.79259 3.87848 2.75762 4.04936L2.75 4.12494V6.24994H15.25V4.12494C15.25 3.91783 15.0821 3.74994 14.875 3.74994Z\"]};/* ======================================================================================================\n ROSTER 2 (20 Oct 2026): five more tiles, each with Standard and Turned up.\n 1 date picker (Input / Date 3897:30972). (Line drawings were cut in v12; their code is kept in .versions/*.v11.) The surface stack, logo and swatches live in g-roster3.ts (roster 3).\n Data (arc geometry, icon paths) lives in f-roster2-data.ts. The performance panel and pictograms were removed in roster 3 (code kept in .versions/*.v7).\n Same mechanics as the rest: one clock per mount, every element a pure function of t, seekable, reduced-motion still.\n ====================================================================================================== */const hex2=h=>{const s=h.replace(\"#\",\"\");return[0,2,4].map(i=>parseInt(s.slice(i,i+2),16));};const mixHex=(a,b,k)=>{const A=hex2(a),B=hex2(b);return\"rgb(\"+A.map((v,i)=>Math.round(mix(v,B[i],k))).join(\",\")+\")\";};const themeOf=g=>g.closest(\".pc\")?.getAttribute(\"data-pc-theme\")===\"dark\"?\"dark\":\"light\";/* ---------- 1. DATE PICKER (Input / Date, 3897:30972 light / 3897:30986 dark) ----------\n Field 410 x 50 (border 1, radius 4, padding 12, 18px calendar icon), calendar 410 x 400 (border 1 brand, radius 4, level-2 shadow),\n header 55 (chevrons 18px, \"Apr 2025\" 19.2px semibold), 7 x 7 grid of 32px day cells on a 8px gap, selected day = brand pill. */const DP_CSS=`\n.pc[data-pc-theme=\"light\"] { --dpbg: #ffffff; --dphov: #edecf6; --dpdis: #0d004d52; --dpsh: 0 3px 5px -1px #0d00481f, 0 5px 8px #0d004814, 0 1px 14px #0d00480a; --dpic: #5b5ea3; --dpbloom: 81 46 171; }\n.pc[data-pc-theme=\"dark\"] { --dpbg: #38353d; --dphov: #4a4752; --dpdis: #f3f2f652; --dpsh: 0 0 0 0 transparent; --dpic: #cfced6; --dpbloom: 183 155 254; }\n.dp { position: absolute; left: 0; top: 0; width: 410px; height: 486px; transform-origin: 0 0; font-family: \"Plus Jakarta Sans\", Inter, system-ui, sans-serif; font-feature-settings: \"liga\" 0; }\n.dp .lb { position: absolute; left: 0; top: 0; height: 20px; display: flex; gap: 8px; align-items: center; font-weight: 500; line-height: 1; white-space: nowrap; }\n.dp .lb b { font: 500 16px/1 inherit; color: var(--ink); } .dp .lb i { font-style: normal; font-size: 14px; color: var(--ink2); }\n.dp .fd { position: absolute; left: 0; top: 28px; width: 410px; height: 50px; border-radius: 4px; border: 1px solid; padding: 12px; display: flex; align-items: center; gap: 12px; background: var(--inbga);\n border-color: color-mix(in srgb, color-mix(in srgb, var(--inborder), var(--inborderh) calc(var(--h) * 100%)), var(--brand) calc(var(--a) * 100%));\n box-shadow: 0 0 0 4px color-mix(in srgb, var(--ringsh) calc(var(--a) * 100%), transparent); }\n.dp .fd .tx { position: relative; flex: 1 1 0; height: 25.6px; font-size: 16px; line-height: 1.6; }\n.dp .fd .tx span { position: absolute; left: 0; top: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }\n.dp .fd .ph { color: var(--ph); } .dp .fd .vl { color: var(--ink); }\n.dp .fd svg { flex: none; color: var(--ink); }\n.dp .cal { position: absolute; left: 0; top: 86px; width: 410px; height: 400px; border-radius: 4px; border: 1px solid var(--brand); background: var(--dpbg); box-shadow: var(--dpsh); overflow: hidden; opacity: 0; transform-origin: 50% -58px; }\n.dp .hd { position: absolute; left: 0; top: 0; right: 0; height: 55px; border-bottom: 1px solid var(--inborder); }\n.dp .hd .ic { position: absolute; top: 18px; width: 18px; height: 18px; }\n.dp .hd .ic svg { display: block; } .dp .hd .ic path { fill: var(--dpic); }\n.dp .hd .hv { position: absolute; top: 13px; width: 28px; height: 28px; margin-left: -5px; border-radius: 4px; background: var(--dphov); opacity: 0; }\n.dp .hd .ti { position: absolute; left: 0; right: 0; top: 12px; text-align: center; font-weight: 600; font-size: 19.2px; line-height: 1.6; color: var(--ink); white-space: nowrap; }\n.dp .hd .ti span { position: absolute; left: 0; right: 0; top: 0; }\n.dp .bd { position: absolute; left: 0; top: 55px; right: 0; height: 343px; overflow: hidden; }\n.dp .ly { position: absolute; left: 0; top: 0; width: 408px; height: 343px; }\n.dp .rw { position: absolute; left: 0; width: 408px; height: 37.57px; }\n.dp .dc { position: absolute; top: 2.8px; width: 32px; height: 32px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1.6; color: var(--ink); font-variant-numeric: tabular-nums; }\n.dp .dc.wd { font-weight: 600; } .dp .dc.dim { color: var(--dpdis); }\n.dp .dc .hv { position: absolute; inset: 0; border-radius: 4px; background: var(--dphov); opacity: 0; }\n.dp .dc span { position: relative; }\n.dp .pl { position: absolute; width: 32px; height: 32px; margin: 0; border-radius: 4px; background: var(--brand); color: var(--onbrand); display: flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1.6; font-variant-numeric: tabular-nums; opacity: 0; transform-origin: 50% 50%; }\n.dp .bm { position: absolute; width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%; opacity: 0; background: radial-gradient(circle, rgb(var(--dpbloom) / .5) 0%, rgb(var(--dpbloom) / .22) 34%, rgb(var(--dpbloom) / 0) 60%); }\n`;const DP_PAD=16,DP_CW=(408-32-48)/7,DP_RH=(343-32-48)/7;const dpX=c=>DP_PAD+c*(DP_CW+8)+DP_CW/2;const dpYr=r=>DP_PAD+r*(DP_RH+8)+DP_RH/2/* centre of row r (row 0 = weekdays) in body coords */;const dpIcon=k=>`${DT_ICONS[k].map(d=>``).join(\"\")}`;/* real calendars for the CURRENT month and the next one, computed on the client when the piece is built (v12: never a hard-coded year; the pieces are built in an effect, so no server/client mismatch) */function dpMonth(first,days){const cells=[];for(let i=0;i<42;i++){const d=i-first+1;if(d<1)continue;const dim=d>days;cells.push({n:dim?d-days:d,dim,r:1+Math.floor(i/7),c:i%7});}return cells;}const dpFind=(m,n)=>m.find(c=>!c.dim&&c.n===n);const DP_MN=[\"Jan\",\"Feb\",\"Mar\",\"Apr\",\"May\",\"Jun\",\"Jul\",\"Aug\",\"Sep\",\"Oct\",\"Nov\",\"Dec\"];function mkDatePicker(turned){const LOOP=8400;const T={cur:1e3,field:1450,click1:1700,click2:3100,chevron:4400,click3:5900,fold:6500,resetA:7650,resetB:8150};return{loop:LOOP,still:7400,css:DP_CSS,cam:camStd(LOOP,.9,[1e3,1700,6800,7600]),build(g){const now=new Date,y0=now.getFullYear(),m0=now.getMonth(),m1=(m0+1)%12,y1=m0===11?y0+1:y0;const DP_APR=dpMonth(new Date(y0,m0,1).getDay(),new Date(y0,m0+1,0).getDate()),DP_MAY=dpMonth(new Date(y1,m1,1).getDay(),new Date(y1,m1+1,0).getDate());const DP_FROM=dpFind(DP_APR,10),DP_TO=dpFind(DP_APR,22),DP_PICK=dpFind(DP_MAY,15);const DP_FIELD_TXT=`15/${String(m1+1).padStart(2,\"0\")}/${String(y1%100).padStart(2,\"0\")}`;const S=.92,X0=(640-410*S)/2,Y0=16;const dp=mkEl(\"div\",\"dp\",g);dp.style.transform=`translate(${X0}px,${Y0}px) scale(${S})`;mkEl(\"div\",\"lb\",dp,`Due date(optional)`);const fd=mkEl(\"div\",\"fd\",dp,`
dd/mm/yy${DP_FIELD_TXT}
${dpIcon(\"cal\").replace(\"mkEl(\"div\",\"ic\",hd,dpIcon(k),`left:${x}px`);icon(\"dprev\",16);icon(\"prev\",46);const nxHv=mkEl(\"div\",\"hv\",hd,\"\",`left:${343}px`);const nxI=icon(\"next\",343);icon(\"dnext\",373);void nxI;const ti=mkEl(\"div\",\"ti\",hd,`${DP_MN[m0]} ${y0}${DP_MN[m1]} ${y1}`);const tiA=ti.children[0],tiB=ti.children[1];const bd=mkEl(\"div\",\"bd\",cal);/* static weekday row */const wdr=mkEl(\"div\",\"rw\",bd,\"\",`top:${(dpYr(0)-DP_RH/2).toFixed(2)}px`);[\"Su\",\"Mo\",\"Tu\",\"We\",\"Th\",\"Fr\",\"Sa\"].forEach((w,c)=>mkEl(\"div\",\"dc wd\",wdr,`${w}`,`left:${(dpX(c)-16).toFixed(2)}px`));/* selected days: a pill sits in place on its own number (no pill ever travels); pressing a day scales that pill down and springs it back */const mkLay=(cells,sel)=>{const ly=mkEl(\"div\",\"ly\",bd);const rows=[];for(let r=1;r<=6;r++)rows[r]=mkEl(\"div\",\"rw\",ly,\"\",`top:${(dpYr(r)-DP_RH/2).toFixed(2)}px`);const bm=mkEl(\"div\",\"bm\",ly);const hv={},pls={};cells.forEach(cc=>{const left=`left:${(dpX(cc.c)-16).toFixed(2)}px`;const el=mkEl(\"div\",\"dc\"+(cc.dim?\" dim\":\"\"),rows[cc.r],`
${cc.n}`,left);if(!cc.dim)hv[cc.n]=el.firstElementChild;if(!cc.dim&&sel.includes(cc.n))pls[cc.n]=mkEl(\"div\",\"pl\",ly,`${cc.n}`,`left:${(dpX(cc.c)-16).toFixed(2)}px;top:${(dpYr(cc.r)-16).toFixed(2)}px`);});return{ly,rows,bm,pls,hv};};const A=mkLay(DP_APR,[DP_FROM.n,DP_TO.n]),B=mkLay(DP_MAY,[DP_PICK.n]);/* geometry helpers (body coords) */const cc=c=>({x:dpX(c.c),y:dpYr(c.r)});const pA=cc(DP_FROM),pB=cc(DP_TO),pC=cc(DP_PICK);const rise=(r,t)=>turned?ph(t,T.click1+40+30*r,T.click1+420+30*r,OQ):1;/* press and bounce in place: the fill appears as the number is pressed (scale .9 over 110ms), then a spring back to 1 with a slight overshoot */const press2=(t,c)=>{if(t{const p=L.pls[n];p.style.opacity=op.toFixed(3);p.style.transform=`translateY(${dy.toFixed(2)}px) scale(${sc.toFixed(4)})`;};/* cursor: stage coordinates */const sx=x=>X0+S*x,sy=y=>Y0+S*y;const fieldPt={x:sx(250),y:sy(28+25)};const bodyPt=(x,y)=>({x:sx(1+x),y:sy(86+1+55+y)});const d22=bodyPt(pB.x+4,pB.y+3),nx={x:sx(343+9),y:sy(86+1+27)},d15=bodyPt(pC.x+4,pC.y+3);const cur=mkCursorKit(g);const{cfg}=mkCurCfg(g,{loop:LOOP,arc:30,pts:[{t:T.cur,x:0,y:0},{t:T.field,x:fieldPt.x,y:fieldPt.y},{t:T.click1+150,x:fieldPt.x,y:fieldPt.y},{t:3e3,x:d22.x,y:d22.y},{t:T.click2+200,x:d22.x,y:d22.y},{t:4300,x:nx.x,y:nx.y},{t:T.chevron+160,x:nx.x,y:nx.y},{t:5800,x:d15.x,y:d15.y},{t:T.click3+160,x:d15.x,y:d15.y},{t:6700,x:d15.x+46,y:d15.y+40}],st:[{t:0,s:\"arrow\"},{t:1250,s:\"point\"},{t:6200,s:\"arrow\"}],clicks:[{a:T.click1,b:T.click1+80},{a:T.click2,b:T.click2+80},{a:T.chevron,b:T.chevron+80},{a:T.click3,b:T.click3+80}]});return t=>{const alive=t=.999?\"hidden\":\"visible\";B.ly.style.visibility=sl<=.001?\"hidden\":\"visible\";const tt=alive?ph(t,T.chevron+120,T.chevron+600,SOFT):0;tiA.style.opacity=String(1-tt);tiB.style.opacity=String(tt);/* rows (turned: rise 6px, 30ms apart) */for(let r=1;r<=6;r++){const e=rise(r,t),tr=`translateY(${(6*(1-e)).toFixed(2)}px)`;[A,B].forEach(L=>{L.rows[r].style.transform=tr;L.rows[r].style.opacity=String(e);});}wdr.style.transform=`translateY(${(6*(1-rise(0,t))).toFixed(2)}px)`;wdr.style.opacity=String(rise(0,t));/* selected days: Apr 10 is selected at the start and fades out in place when Apr 22 is pressed; May 15 is pressed later. Nothing moves between cells. */const e0=rise(DP_FROM.r,t);setPl(A,DP_FROM.n,e0*(1-ph(t,T.click2,T.click2+320,SOFT)),1,6*(1-e0));const p2=alive?press2(t,T.click2):{op:0,s:1};setPl(A,DP_TO.n,p2.op,p2.s);const p3=alive?press2(t,T.click3):{op:0,s:1};setPl(B,DP_PICK.n,p3.op,p3.s);/* hover shade on the day / chevron about to be clicked */A.hv[22].style.opacity=String(ph(t,2850,3e3,SOFT)*(1-ph(t,T.click2,T.click2+60)));B.hv[15].style.opacity=String(ph(t,5650,5800,SOFT)*(1-ph(t,T.click3,T.click3+60)));nxHv.style.opacity=String(ph(t,4150,4300,SOFT)*(1-ph(t,T.chevron+300,T.chevron+460,SOFT)));/* soft amethyst bloom behind the pill on selection (turned) */if(turned){const b1=ph(t,T.click2+40,T.click2+900),b2=alive?ph(t,T.click3+40,T.click3+900):0;A.bm.style.left=pB.x+\"px\";A.bm.style.top=pB.y+\"px\";A.bm.style.opacity=(alive?.9*Math.sin(Math.PI*b1):0).toFixed(3);B.bm.style.left=pC.x+\"px\";B.bm.style.top=pC.y+\"px\";B.bm.style.opacity=(.9*Math.sin(Math.PI*b2)).toFixed(3);}cur(t,cfg);};}};}export function mountDateStd(){return mkDatePicker(false);}export function mountDateUp(){return mkDatePicker(true);}/* ======================================================================================================\n ROSTER 3+4 (20 Oct 2026): surface stack (Rise / Turn), brand colour swatches. (Pearson logo tile removed in roster 4; code kept in .versions.)\n Same mechanics as the rest: one clock per mount, every element a pure function of t, seekable, reduced-motion still.\n ====================================================================================================== */const rgbaMix=(a,b,k,al)=>mixHex(a,b,k).replace(\"rgb(\",\"rgba(\").replace(\")\",`,${al})`);/* ---------- 1. SURFACE STACK ----------\n One stack of four layers (surface-low to surface-highest), always one theme at a time: the whole stack (and its backdrop) cross-fades together.\n The tile has its own theme timeline: it starts on the page theme, switches to the opposite, holds, and switches back; a page theme change restarts it.\n Layers are parallel planes in one preserve-3d context at z = cumulative gaps, each gap >= SK_MINZ, so no layer can ever touch another.\n Roster 4: no labels. An \"Aa\" glyph lies flat on the top face of the active layer (a child of the layer, so it rides with it in its isometric plane),\n and one small ratio badge (upright, a billboard) sits beside it. The only text is the glyph and the ratio. */const SK_CSS=`\n.sk-bg { position: absolute; left: -400px; top: -400px; width: 1440px; height: 1280px; }\n.sk-p { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; }\n.sk-l { position: absolute; border-radius: 20px; }\n.sk-aa { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font: 700 76px/1 \"Plus Jakarta Sans\", Inter, system-ui, sans-serif; letter-spacing: -.02em; opacity: 0; white-space: nowrap; pointer-events: none; }\n.sk-bd { position: absolute; left: 0; top: 0; height: 42px; width: 118px; border-radius: 10px; border: 1.5px solid; display: flex; align-items: center; justify-content: center; opacity: 0; z-index: 5; font: 600 22px/26px \"Plus Jakarta Sans\", Inter, system-ui, sans-serif; white-space: nowrap; }\n.sk-rt { position: relative; width: 92px; height: 26px; }\n.sk-rt span { position: absolute; left: 0; top: 0; width: 92px; text-align: center; white-space: nowrap; }\n`;const SK_SIN=Math.sin(Math.PI*54.7/180),SK_COS=Math.cos(Math.PI*54.7/180);const SK_COL={light:{bg:\"#f7f6fb\",layers:[\"#e8e6f2\",\"#f0eef8\",\"#f7f6fb\",\"#ffffff\"],ink:\"#0d004d\",line:\"#0d004d\",bdBg:\"#e9fbf2\",bdBr:\"#00b057\",bdTx:\"#167947\"},dark:{bg:\"#08080a\",layers:[\"#101012\",\"#232325\",\"#2c2b30\",\"#38353d\"],ink:\"#f3f2f6\",line:\"#ffffff\",bdBg:\"#101012\",bdBr:\"#96d7a7\",bdTx:\"#62c480\"}};const SK_RATIO={light:[\"15.16\",\"16.22\",\"17.33\",\"18.67\"],dark:[\"17.05\",\"14.19\",\"12.44\",\"10.86\"]};const SK_MINZ=7,SK_SEPZ=62,SK_SZ=170,SK_CX=300,SK_CY=345,SK_AAX=27,SK_AAY=27;const skDarkShadow=(phi,amt)=>{/* the site recipe's dark version: 12 layers, 44px long, black, curve 1.9, soft; the offset is a fixed \"down the page\" direction whatever the stack's turn */const n=12,len=44,A=1.22*.17,out=[];for(let j=0;j{if(turned)return 1;const up=Math.max(0,spr(t-(350+260*(i-1)),150,11));const settle=combo?ph(t,6300+170*(3-i),7100+170*(3-i),SOFT):ph(t,5700+170*(3-i),6500+170*(3-i),SOFT);return up*(1-settle);};const kkOf=t=>combo?ph(t,3200,4200,SOFT)*(1-ph(t,5600,6200,SOFT)):turned?ph(t,1600,2600,SOFT)*(1-ph(t,6100,7100,SOFT)):ph(t,3900,4700,SOFT)*(1-ph(t,7e3,7800,SOFT));const phiOf=t=>Math.PI/4+(combo?20*Math.PI/180*bump(t,1500,4400):turned?20*Math.PI/180*(bump(t,400,3800)+bump(t,4900,8300)):0);/* which layer the Aa (and the ratio badge) is on. v15: it never shows on two layers at once. A hop from layer i to i+1 is the old Aa fading fully out (180ms), then the new one fading in on the next layer (180ms);\n the badge does the same, taking the new layer's height and ratio while it is invisible. wo / wn are the old and new layer's share of the glyph; they are never both above zero. */const AA_FADE=180;const aaWins=t=>{if(combo)return[[1900,2300],[2700,3100],[3500,3900]];if(!turned)return[0,1,2].map(i=>[1450+800*i,1900+800*i]);return t<4300?[[900,1300],[1500,1900],[2400,2800]]:[[5500,5900],[6100,6500],[7e3,7400]];};const aaAt=t=>{const w=aaWins(t);let idx=0;w.forEach(x=>{if(t>=x[1])idx++;});const k=idxk[0]){wo=1-sstep((t-k[0])/AA_FADE);wn=sstep((t-(k[1]-AA_FADE))/AA_FADE);}return{i0:idx,i1:Math.min(3,idx+1),wo,wn};};const cardOp=t=>combo?ph(t,1500,1800,SOFT)*(1-ph(t,4700,5e3,SOFT)):turned?ph(t,550,850,SOFT)*(1-ph(t,3300,3600,SOFT))+ph(t,5e3,5300,SOFT)*(1-ph(t,7800,8100,SOFT)):ph(t,1e3,1300,SOFT)*(1-ph(t,5400,5750,SOFT));return{loop:LOOP,still:combo?3100:turned?2900:3500,rst:true,css:SK_CSS,cam:()=>({rx:0,ry:0,sc:1}),build(g){const bg=mkEl(\"div\",\"sk-bg\",g);const P=mkEl(\"div\",\"sk-p\",g);const aas=[];const L=[0,1,2,3].map(()=>{const l=mkEl(\"div\",\"sk-l\",P);l.style.cssText+=`left:${-SK_SZ/2}px;top:${-SK_SZ/2}px;width:${SK_SZ}px;height:${SK_SZ}px;`;aas.push(mkEl(\"div\",\"sk-aa\",l,\"Aa\"));return l;});const bd=mkEl(\"div\",\"sk-bd\",g),rt=mkEl(\"div\",\"sk-rt\",bd);const rv=[0,1,2,3].map(()=>mkEl(\"span\",\"\",rt));return t=>{const th=themeOf(g),ot=th===\"light\"?\"dark\":\"light\";const A=SK_COL[th],B=SK_COL[ot];/* inside the showcase reel the stack sits on the site background: no backdrop slab, and no theme flip (the layers keep the page theme) */const emb=!!g.closest(\".pcs\");const kk=emb?0:kkOf(t),phi=phiOf(t);P.style.transform=`translate(${SK_CX}px,${SK_CY}px) rotateX(54.7deg) rotateZ(${(phi*180/Math.PI).toFixed(3)}deg)`;bg.style.backgroundColor=emb?\"transparent\":mixHex(A.bg,B.bg,kk);/* layers: cumulative gaps, so the order and a minimum gap hold in every frame */const zs=[0],ss=[1,sOf(1,t),sOf(2,t),sOf(3,t)];for(let i=1;i<4;i++)zs[i]=zs[i-1]+SK_MINZ+SK_SEPZ*ss[i];const amt=.35+.65*cl(Math.max(ss[1],ss[2],ss[3]));const sh=[];const{i0,i1,wo,wn}=aaAt(t);const op=cardOp(t);const ink=mixHex(A.ink,B.ink,kk);L.forEach((l,i)=>{l.style.backgroundColor=mixHex(A.layers[i],B.layers[i],kk);l.style.transform=`translateZ(${zs[i].toFixed(3)}px)`;l.setAttribute(\"data-z\",zs[i].toFixed(3));/* shadows: light as before (single soft tinted), dark = the recipe; both cross-fade with the theme */sh.length=0;const lo=th===\"light\"?1-kk:kk/* weight of the light-theme shadow */;const dw=th===\"light\"?kk:1-kk/* weight of the dark-theme shadow */;if(lo>.004)sh.push(`${(19.8*Math.sin(phi)).toFixed(1)}px ${(19.8*Math.cos(phi)).toFixed(1)}px 36px rgba(81,46,171,${(.2*amt*lo).toFixed(3)})`);if(dw>.004)sh.push(...skDarkShadow(phi,amt*dw));l.style.boxShadow=sh.join(\",\");/* the Aa lies on this layer's top face, in its plane (rotated to read up the isometric axis), nudged to the visible front of the face */const w=(i===i0?wo:0)+(i===i1&&i1!==i0?wn:0);aas[i].style.opacity=(w*op).toFixed(3);aas[i].style.color=ink;aas[i].style.transform=`translate(${SK_AAX}px,${SK_AAY}px) rotate(-90deg)`;});/* the badge: a billboard standing clear of the stack, to its right (the layers never reach past x = SK_CX + 120, whatever the turn), at the height of the layer the Aa is on, gliding with it from layer to layer */const ly=i=>SK_CY-zs[i]*SK_SIN;const bi=wn>0?i1:i0,by=ly(bi);bd.style.transform=`translate(${(SK_CX+SK_SZ*Math.SQRT1_2+38).toFixed(2)}px,${(by-21).toFixed(2)}px)`;bd.style.opacity=(op*(wn>0&&i1!==i0?wn:wo)).toFixed(3);bd.style.backgroundColor=mixHex(A.bdBg,B.bdBg,kk);bd.style.borderColor=mixHex(A.bdBr,B.bdBr,kk);bd.style.color=mixHex(A.bdTx,B.bdTx,kk);const ra=SK_RATIO[th],rb=SK_RATIO[ot];const so=wn>0?0:1,sn=1-so,rs=[ra[i0],ra[i1],rb[i0],rb[i1]],rw=[so*(1-kk),sn*(1-kk),so*kk,sn*kk];rv.forEach((e,n)=>{e.textContent=rs[n]+\":1\";e.style.opacity=rw[n].toFixed(3);});};}};}export function mountStackStd(){return mkSurfaceStack(\"std\");}export function mountStackUp(){return mkSurfaceStack(\"turned\");}export function mountStackCombo(){return mkSurfaceStack(\"combo\");}/* ---------- 3. BRAND COLOUR SWATCHES (case study file: 6:21119 \"Color sample 830\", colour foundations 6:20948; hex values read from Figma) ----------\n Roster 4: no text at all. Three states, tweened chip to chip (position and size, FLIP style):\n base colours (6 large chips) -> ramps (each base extends into its full ramp of tints) -> base colours (the lab's loop only; the reel stops on the ramps).\n Standard eases; Turned up springs, with a hue bloom behind the active ramp and chips that lift while they travel. */const SW_RAMPS=[{keys:[0,4,8],hex:[\"#0D004D\",\"#2F3178\",\"#5B5EA3\",\"#8B8CD1\",\"#C1BFFF\",\"#CAC9FD\",\"#D6D5FB\",\"#E3E1F9\",\"#EDECF6\",\"#F4F4FA\",\"#FBFAFF\"]},{keys:[2],hex:[\"#7B1571\",\"#B820A9\",\"#DF41CF\",\"#EC8DE2\",\"#F1B3EB\",\"#FCE9FA\"]},{keys:[2],hex:[\"#7F6701\",\"#BF9A00\",\"#FFCE00\",\"#FFE266\",\"#FEEB99\",\"#FFFAE5\"]},{keys:[2],hex:[\"#168584\",\"#22C7C6\",\"#56E2E1\",\"#9AEEED\",\"#BAF3F2\",\"#DDF9F9\"]}];const SW_CSS=`\n.sw-c { position: absolute; left: 0; top: 0; width: 0; height: 0; }\n.sw-grp { position: absolute; left: 40px; top: 40px; width: 560px; height: 400px; }\n.sw-b { position: absolute; border-radius: 50%; filter: blur(26px); opacity: 0; }\n`;const swLerp=(a,b,k)=>[mix(a[0],b[0],k),mix(a[1],b[1],k),mix(a[2],b[2],k),mix(a[3],b[3],k)];const swO=(a,b,p)=>b>a?mix(a,b,cl(3*p)):b[BX+n%3*(BC+BG),BY+Math.floor(n/3)*(BC+BG),BC,BC];const RW=560,RH=82,RG=14,RX=40,RY=(480-(4*RH+3*RG))/2;const MX=40,MY=40/* the chips' container sits at 40, 40 */;const defs=[];let bn=0;const keyBase={};SW_RAMPS.forEach((rp,r)=>rp.keys.forEach(k=>{keyBase[r+\":\"+k]=bn++;}));SW_RAMPS.forEach((rp,r)=>{const n=rp.hex.length,cw=(RW-(n-1)*6)/n;rp.hex.forEach((hex,c)=>{const nk=rp.keys.reduce((a,k)=>Math.abs(k-c)({rx:0,ry:0,sc:1}),build(g){const blooms=[];if(turned)SW_RAMPS.forEach((rp,r)=>blooms.push(mkEl(\"div\",\"sw-b\",g,\"\",`left:${RX-30}px;top:${RY+r*(RH+RG)-18}px;width:${RW+60}px;height:${RH+36}px;background:${rp.hex[rp.keys[rp.keys.length>1?1:0]]}`)));const grp=mkEl(\"div\",\"sw-grp\",g);const chips=defs.map(d=>({...d,el:mkEl(\"div\",\"sw-c\",grp,\"\",`background:${d.hex}`)}));return t=>{const dark=themeOf(g)===\"dark\";const pr=a=>turned?spr(t-a,170,13):ph(t,a,a+DUR,SOFT);chips.forEach(ch=>{const a1=S1+ch.d1,a3=S3+ch.d3;const p1=pr(a1),p3=pr(a3);let r=swLerp(ch.base,ch.ramp,p1),o=swO(ch.ob,1,p1);r=swLerp(r,ch.base,p3);o=swO(o,ch.ob,p3);const lift=turned?Math.max(...[a1,a3].map(a=>Math.sin(Math.PI*cl((t-a)/800)))):0;const w=Math.max(0,r[2]),h=Math.max(0,r[3]);ch.el.style.transform=`translate(${(r[0]-MX).toFixed(2)}px,${(r[1]-MY-4*lift).toFixed(2)}px)`;ch.el.style.width=w.toFixed(2)+\"px\";ch.el.style.height=h.toFixed(2)+\"px\";ch.el.style.borderRadius=cl(Math.min(w,h)*.12,4,16).toFixed(2)+\"px\";ch.el.style.opacity=o.toFixed(3);ch.el.style.zIndex=String(ch.ob===1?10:1);const sh=1+7*lift;ch.el.style.boxShadow=dark?`inset 0 0 0 1px rgba(255,255,255,0.12), 0 ${sh.toFixed(1)}px ${(3+14*lift).toFixed(1)}px rgba(0,0,0,${(.4+.25*lift).toFixed(3)})`:`inset 0 0 0 1px rgba(13,0,77,0.12), 0 ${sh.toFixed(1)}px ${(3+14*lift).toFixed(1)}px rgba(13,0,77,${(.1+.14*lift).toFixed(3)})`;});if(turned)blooms.forEach((b,r)=>{const a=S1+150+300*r;b.style.opacity=(ph(t,a,a+500,SOFT)*(1-ph(t,a+800,a+1500,SOFT))*(dark?.42:.36)).toFixed(3);});};}};}export function mountSwatchesStd(){return mkSwatches(false);}export function mountSwatchesUp(){return mkSwatches(true);}/* ---------- registry: the React lab and the later scene use this ---------- */const mk=(name,std,up,combo)=>(el,opts={})=>mountPiece(name,el,opts,{standard:std(),turned:up(),combo:combo?.()});export const mountViz=mk(\"viz\",mountVizStd,mountVizUp);export const mountSwitch=mk(\"switch\",mountSwitchStd,mountSwitchUp);export const mountSlider=mk(\"slider\",mountSliderStd,mountSliderUp);export const mountButton=(el,opts={})=>mountPiece(\"button\",el,opts,{standard:mountButtonStd(),turned:mountButtonUp(),start:mountButtonPart(\"start\"),cont:mountButtonPart(\"cont\")});export const mountInput=mk(\"input\",mountInputStd,mountInputUp);export const mountDate=mk(\"datepicker\",mountDateStd,mountDateUp);export const mountStack=mk(\"stack\",mountStackStd,mountStackUp,mountStackCombo);export const mountSwatches=mk(\"swatches\",mountSwatchesStd,mountSwatchesUp);export const PIECES={viz:{mount:mountViz,title:\"Data visualisation\",std:\"Donuts sweep in with a soft motion smear, bars spring up, then the toolkit's pattern fills wipe across.\",up:\"Donuts spin up with a light trail and the 80% lands in a soft amethyst bloom, bars burst up with patterns scrolling inside, and the camera drifts to a gentle hero angle.\"},switch:{mount:mountSwitch,title:\"Switch\",std:\"A cursor flips the first switch on a spring; the second follows from the keyboard, ring and all.\",up:\"A liquid knob stretches through a gooey track, the fill washes in, the tick pops with toolkit-coloured particles, and three switches tip over like dominoes.\"},slider:{mount:mountSlider,title:\"Slider\",std:\"The handle is dragged to 85 with a rising value label; a range pulls apart.\",up:\"A fast drag with a motion trail, a plain tooltip that cross-fades as the value changes, a glowing track, and range handles that bounce off the ends.\"},button:{mount:mountButton,title:\"Primary button\",std:\"Continue appears, shows its keyboard focus ring and is clicked (a ring ripple); it morphs into the yellow Start lesson, a small ring radiates from its edge on hover, and a click sends a pulse.\",up:\"The same, turned up: the final click sends concentric shock rings, a soft light sweep and a pop of brand-coloured particles.\"},input:{mount:mountInput,title:\"Text input\",std:\"Focus, typing, an error that shakes, then a morph to success.\",up:\"Characters appear as typed, the error shakes the field a few pixels, and success sweeps a green glow with a self-drawing check.\"},datepicker:{mount:mountDate,title:\"Date picker\",std:\"The calendar unfolds from the field, each day you click presses down and springs back in place as its fill appears (the old selection fades out where it is), the month grid slides across while its label cross-fades in place, then the calendar folds away and the field shows the date.\",up:\"The same, with the week rows rising in one after another and a soft amethyst bloom behind each day as it lands.\"},stack:{mount:mountStack,title:\"Surface stack\",labels:[\"Rise\",\"Turn\",\"Rise + Turn\"],std:\"Rise: the four surface layers rise apart from a closed stack on a spring. An Aa lies flat on the top face of each layer in turn, with its contrast ratio beside it, then the whole stack cross-fades to the other theme and settles closed.\",combo:\"Rise + Turn: the closed stack rises apart (the Rise), then the separated stack turns slowly about 20 degrees while the Aa steps from layer to layer, with its contrast ratio beside it (the Turn). The whole stack cross-fades to the other theme at the midpoint of the turn, turns back, and settles closed.\",up:\"Turn: the separated stack turns slowly about 20 degrees while the Aa steps from layer to layer. At the midpoint the whole stack cross-fades to the other theme together, then it turns back.\"},swatches:{mount:mountSwatches,title:\"Brand colours\",std:\"Six base colours, each extending into its full ramp of tints, and the reel ends on the ramps. (The lab loop then folds them back to the base colours.)\",up:\"The same, with springs, a soft bloom of each hue behind its ramp, and chips that lift as they travel.\"}};/* ======================================================================================================\n PEARSON SHOWCASE (20 Oct 2026; v11 of 21 Oct): the pieces as one little reel, with a video-style scrubber. Pause freezes the reel on the exact frame, like a video (v14).\n mountShowcase(el, { theme, mode, background }) -> { setTheme, setMode, setBackground, pause, play, toggle, destroy, ... } \n - It composes the existing piece mounts (PIECES, mounted \"embedded\"): the showcase owns their clocks and only seeks them. Nothing is duplicated.\n - Stage: the takeover art box, logical 640 x 460, scaled to fit by CSS alone (container query units), so first paint and JS-off look the same.\n - Modes: \"slideshow\" (consecutive pieces overlap for 600ms, at most two visible) and \"single\" (one at a time, 300ms calm gap). Both loop seamlessly.\n - v28: every loop is the same: documentation opener, Start lesson, the charts, switch, date picker, input, stack, swatches, Continue, then Continue cross-fades back into the opener's first frame (the clock's end is the picture at 0, so the scrubber wraps with no jump). No opening montage, no cards anywhere.\n - Scrubber (play / pause button + one slim seekable track, role=\"slider\"): its position is the reel clock, everything is seekable.\n - Pause: the clock stops and everything stays on the current frame (active piece and cursor included). Scrubbing while paused shows that frame and stays paused. First paint, SSR, JS-off and reduced motion show the reel's first frame (the documentation opener's) statically; under reduced motion the scrubber stays so the visitor can press play.\n Standing rules: no foil, no text movement, minimal text, no particles on charts, patterns static once landed, text upright and crisp, nothing clipped.\n ====================================================================================================== */import*as React from\"react\";import{mountWave,siteIsDark}from\"https://framerusercontent.com/modules/Q4D2ObxSe1YswriUHW0h/ZqWl4m3OhGNUMgPvPLGU/PearsonWave.js\";const SC_DOCS_MS=7600/* the camera glide of the documentation opener */;/* v28 order: the documentation opener, Start lesson, the chart group (donuts + bars + Solid / Patterns control), switch, date picker, text input, surface stack (Rise + Turn), swatches, Continue. Continue cross-fades into the opener's first frame, which is also the reel's clock 0, so every loop starts on the documentation.\n There is no montage and no cards. The slider is not in the reel. */const SC_PLAN=[/* v21 (v13 brief): the documentation opener. Plays on every loop (v28): the camera glides over three pages of the Pearson Product Toolkit's documentation lying on one tilted plane, from the Documentation page to the Colour sticker sheet, and settles on the button-primary grid; then Start lesson takes over (cross-fade). The loop ends on Continue, which cross-fades back into this opener's first frame. */{name:\"docs\",variant:\"standard\",docs:true,segs:[[0,SC_DOCS_MS,1]],hold:0,pre:0},/* Start lesson: opens on the button at rest, arriving from the documentation opener (cross-fade). The cursor comes in, hovers it (the fill changes colour, nothing else) and clicks: ripple, the full pulse, shock rings and confetti. v25: the last effect settles at piece clock 1880, so the 320 ms left in the stretch plus a 280 ms hold, then the 600 ms overlap, puts the first chart arrival 0.8 s after it (was 1.52 s). */{name:\"button\",variant:\"start\",part:\"start\",segs:[[0,2200,1]],hold:280,pre:0},/* the chart group: donuts sweep in and bars grow (solid), hold, the cursor clicks Patterns, the pill glides, the patterns wipe in on donuts and bars together and stay static, hold. The cursor appears at 3550 and presses at 4150: 600ms after it starts to move */{name:\"viz\",variant:\"turned\",part:\"group\",segs:[[300,1900,.78],[1900,2600,1],[2600,3300,1.4],[3300,3550,.5],[3550,4150,1],[4150,5800,.72]],hold:1300},/* the cursor-led pieces start their clock at 400ms and the first press follows within 600-650ms of it. Everything after the first press keeps its old rate. */{name:\"switch\",variant:\"turned\",segs:[[1250,2e3,1.3],[2e3,4e3,.7]],hold:1200,pre:400},{name:\"datepicker\",variant:\"turned\",segs:[[1e3,1700,1.1],[1700,6900,.9]],hold:1200,pre:400,dyn:true},{name:\"input\",variant:\"turned\",segs:[[300,880,.95],[880,6400,.75]],hold:700,pre:400},/* plays on past the check (5560) so the success burst completes (it runs to 6360) */{name:\"stack\",variant:\"combo\",segs:[[200,7e3,.9]],hold:1200},{name:\"swatches\",variant:\"turned\",segs:[[500,3500,.7]],hold:1300,pre:0},/* v26 (Ben): it ends on the ramps, the montage beat is cut; the ramps settle at piece clock 3440, the bloom is gone by 3350. v22: it arrives as the stack leaves (the default 600ms overlap, no wait before its clock), so the card is never empty while the swatches fade in *//* v28 Continue: appears, shows its focus ring, the cursor presses it (the Material ring ripple), then a hold on the pressed button (clock 2950, just before the morph, which is no longer played); it leaves in the normal exit while the documentation opener's first frame cross-fades in under the loop's end */{name:\"button\",variant:\"cont\",part:\"cont\",segs:[[0,2950,1]],hold:500}];/* v23: the click effects are scaled on their own, not with the button. SC_FX[i] = the half width and half height (slot px, from the button's centre) of the widest effect the piece draws (Start lesson: the shock ring, with the confetti inside it; Continue: the focus ring). The effect is scaled down (CSS scale, --fx) so that its outer edge stays within SC_FX_GAP screen px of the card's edge, and never nearer than 8px to the viewport's edge (on a phone the card is only 20px from it). The button itself keeps its fit. */const SC_FX={1:[440,273],8:[222,79]}/* measured 424 x 265 and 206 x 71, plus the 16 x 8 the pill is pulled towards the cursor (the rings follow the pill, not the card's centre) */;const SC_FX_GAP=28;const SC_FIELD={5:570}/* the text input: the field's own width in slot px (measured, see the harness), so the field can be sized against the card */;const SC_IN=800,SC_OUT=800,SC_OV=600,SC_GAP=300,SC_PRE=.9;const SC_LAND={W:640,H:460,sq:false,m:1,al:0,kd:[]};const SC_FILL=.825,SC_KMAX=3;const SC_FIELD_W=.75/* the text input: its field reaches about this share of the card's width */;function scK0(i,st){const b=SC_BOX[i];if(!b||!b[0]||!b[1])return 1;let k=SC_FILL*Math.min(st.W/b[0],st.H/b[1]);const fw=SC_FIELD[i];if(fw)k=Math.min(k,SC_FIELD_W*st.W/fw);return Math.min(SC_KMAX,k);}function scK(i,st){return scK0(i,st);}/* v18 dynamic scale (the date picker), v22 against the card. Its scale follows its content, from the baked per-100ms content size SC_DIM: while the calendar is open it fills SC_DYN.openH of the card's height (never wider than SC_DYN.openW),\n when it closes to the field the field is scaled up to SC_DYN.closedW of the card's width (so it reads clearly) and glides there. A running minimum then a soft window (both +-R samples) turn the two into a glide. Returns the scale per 100ms of the piece's reel time. */const SC_DYN={openH:.95,openW:.85,closedW:.7,kmax:3,R:2};function scKdArr(i,st){const d=SC_DIM[i];if(!d||!d.length)return null;const n=Math.floor(d.length/2);let hC=1e9,hO=0,wC=1,wO=1;for(let j=0;jhO){hO=h;wO=w;}}const kC=Math.min(SC_DYN.kmax,SC_DYN.closedW*st.W/wC),kO=Math.min(SC_DYN.kmax,SC_DYN.openH*st.H/hO,SC_DYN.openW*st.W/wO);const raw=[];for(let j=0;jhC?cl((d[2*j+1]-hC)/(hO-hC)):1;raw.push(mix(kC,kO,o));}const R=SC_DYN.R,mn=raw.map((_,j)=>{let m=1e9;for(let q=-R;q<=R;q++)m=Math.min(m,raw[Math.max(0,Math.min(n-1,j+q))]);return m;});return mn.map((_,j)=>{let sv=0,sw=0;for(let q=-R;q<=R;q++){const w=.5+.5*Math.cos(Math.PI*q/(R+1));sv+=mn[Math.max(0,Math.min(n-1,j+q))]*w;sw+=w;}return sv/sw;});}/* the piece's scale at reel-local time loc */function scKt(i,loc,st){const a=st.kd[i];if(!a||!a.length)return scK(i,st);const f=cl(loc/SC_CEN_STEP,0,a.length-1),i0=Math.floor(f),i1=Math.min(a.length-1,i0+1);return a[i0]+(a[i1]-a[i0])*(f-i0);}function scLayout(mode){let s=0;const n=SC_PLAN.length;const items=SC_PLAN.map((p,i)=>{const P=p.segs.reduce((a,[f,t,r])=>a+(t-f)/r,0),L=scPre(p)+(SC_IN-SC_IN*SC_PRE)+P+p.hold+SC_OUT;const it={i,start:s,end:s+L,L,P};s=mode===\"slideshow\"?s+L-(SC_PLAN[i+1]?.ov??SC_OV):s+L+SC_GAP;return it;});/* v28: the loop's end is the picture at 0 (the documentation opener's first frame). It fades in over the last xf ms: under Continue's exit (slideshow) or alone in the calm gap (single). */const xf=mode===\"slideshow\"?SC_OV:SC_GAP;const T=items[n-1].end+(mode===\"slideshow\"?0:SC_GAP);return{items,T,xf};}/* the piece's own clock at reel-local time loc: it waits on its first frame while the piece arrives, plays its stretches at their rates, then holds the payoff */const scPre=p=>p.pre??SC_IN*SC_PRE;function scPieceTime(p,loc){let pl=loc-scPre(p);if(pl<=0)return p.segs[0][0];for(const[f,t,r]of p.segs){const d=(t-f)/r;if(pl, 460px)) came out negative and the card collapsed to the top left. These two registered lengths turn the cq maths into plain px on .pcs-sp first; the scale is then taken from px only. Chrome computes the same numbers as before. */\n@property --pcs-cwl { syntax: \"\"; inherits: true; initial-value: 0px; }\n@property --pcs-swl { syntax: \"\"; inherits: true; initial-value: 660px; }\n.pc.pcs { container-type: size; overflow: visible; } /* .pc alone clips: the box never does, so a piece, shadow, glow, ring or cursor may reach past the card */\n.pc-clear > .pcs { background: transparent; }\n.pcs-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }\n/* ---------- v21 layout (v13 brief). Everything hangs off .pcs-sp, which owns the geometry.\n Desktop (1200 and up) is Ben's frame 56:62 in his own 1440 pixels, measured from the text column's guide (--pcs-gl, from the box's left edge) and the box's top (the logo row): the card 551.7 x 287.6 at (24.2, -16.4), the donut row behind it at (340.6, -75.8),\n the bar chart behind it at (144, 238), the scrubber under it at (24, 275). The whole composition is scaled by --S (never above 1) so it fits between the guide and the carousel's fade (--pcs-xr is where the fade starts, from the box's right edge).\n Below 1200 the card is a square (at most 560) inset 20px from the box's sides, the scrubber sits 16px under it, the backdrop charts are not drawn. --pcs-row (tall boxes) is the room the box reserves under the card for the scrubber. ---------- */\n.pcs-sp { position: absolute; inset: 0; pointer-events: none; --g: 20px; --rw: var(--pcs-row, 0px); --cw: min(calc(100cqw - 2 * var(--g)), calc(100cqh - var(--rw)), 560px); --pcs-cwl: var(--cw); --S: 1; }\n.pcs-stage { position: absolute; z-index: 2; left: calc((100cqw - var(--cw)) / 2); top: calc((100cqh - var(--rw) - var(--cw)) / 2); width: 460px; height: 460px; margin: 0; pointer-events: auto; --sqm: 1;\n transform-origin: 0 0; transform: scale(tan(atan2(var(--pcs-cwl), 460px))); border-radius: 18px; background: var(--card-bg); box-shadow: var(--card-sh); }\n.pc[data-pc-theme=\"dark\"] { --card-bg: #2a2a2e; --card-sh: 0 0 0 1px rgb(246 246 246 / .15), 0 60px 90px -50px rgb(0 0 0 / .9); }\n.pc[data-pc-theme=\"light\"] { --card-bg: #eeecf7; --card-sh: 0 0 0 1px rgb(26 34 72 / .08), 0 1px 1px rgb(26 34 72 / .05), 0 4px 8px -2px rgb(26 34 72 / .08), 0 18px 36px -12px rgb(26 34 72 / .2), 0 40px 70px -40px rgb(26 34 72 / .35); }\n.pcs-reel { position: absolute; inset: 0; /* v19: NO edge mask and no clip of any kind on the reel: pieces are fitted so that their BODY sits inside the card; rings, confetti and particles simply pass over the page. v22: always present, so first paint, SSR and JS-off show the documentation opener's first frame. */ }\n.pcs-stage .pcs-slot { position: absolute; left: round(nearest, calc((100% - 640px) / 2), 1px); top: round(nearest, calc((100% - 480px) / 2), 1px); width: 640px; height: 480px; visibility: hidden; opacity: 0; transform-origin: 50% 50%; }\n.pcs-stage .pcs-slot .pc { background: transparent; overflow: visible; }\n.pcs-stage .pcs-slot .pc-pulse, .pcs-stage .pcs-slot .pc-pop { scale: var(--fx, 1); } /* v24: the shock and Continue rings are not scaled (scale would distort the pill's radius): their offset d is capped by --dm instead */ /* v23: the click effects' own size (see SC_FX) */\n.pcs-stage .pcs-slot .sk-bg { display: none; } /* the stack's backdrop slab (1440 x 1280, transparent in the reel) painted nothing but stretched the page's scroll width */\n@media (min-width: 1200px) {\n .pcs-sp { --pcs-swl: min(calc(100cqw + var(--pcs-xr, 0px) - var(--pcs-gl, 0px)), 660px); --S: tan(atan2(var(--pcs-swl), 660px)); }\n .pcs-stage { left: round(nearest, calc(var(--pcs-gl, 0px) + 24.2px * var(--S)), 1px); top: round(nearest, calc(-16.4px * var(--S)), 1px); width: 551.7px; height: 287.6px; --sqm: 0; transform: scale(var(--S)); }\n}\n/* ---------- the backdrop: the big donut row and the bar chart, behind the card (desktop only), at Ben's positions and sizes ---------- */\n.pcs-back { display: none; }\n@media (min-width: 1200px) { .pcs-back { display: block; position: absolute; z-index: 1; left: var(--pcs-gl, 0px); top: 0; width: 700px; height: 400px; transform-origin: 0 0; transform: scale(var(--S)); pointer-events: none; --ba: .6; --bkE: cubic-bezier(.22, .68, .26, 1); } }\n.pc[data-pc-theme=\"light\"] .pcs-back { --ba: .5; }\n.bk-d, .bk-b { position: absolute; }\n.bk-d > svg { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; overflow: visible; }\n.bk-d > span { position: absolute; z-index: 1; inset: 0; display: flex; align-items: center; justify-content: center; font-family: \"Plus Jakarta Sans\", Inter, system-ui, sans-serif; font-weight: 500; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }\n.bk-g { position: absolute; z-index: 1; left: 0; right: 0; height: 1px; background: var(--grid); }\n.bk-bar { position: absolute; z-index: 1; border-radius: 5px; transform-origin: 50% 100%; transform: scaleY(var(--s, 1)); transition: transform .55s var(--bkE); }\n/* the bloom: the foil cards' hover glow (Glow layers: .35s cubic-bezier(.25, 1, .5, 1) fade in, strength --ba), but as a soft colour that follows the pointer, in the chart's own Pearson colour. Transform and opacity only. */\n.bl { position: absolute; left: 0; top: 0; z-index: 0; width: var(--R, 240px); height: var(--R, 240px); margin: calc(var(--R, 240px) / -2) 0 0 calc(var(--R, 240px) / -2); border-radius: 50%; opacity: 0; pointer-events: none;\n background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 78%, transparent) 0%, color-mix(in srgb, var(--c) 30%, transparent) 46%, transparent 100%);\n transform: translate3d(calc(var(--bx, 0) * 1px), calc(var(--by, 0) * 1px), 0); transition: opacity .35s cubic-bezier(.25, 1, .5, 1); }\n.bk-d.hot > .bl, .bk-b.hot > .bl { opacity: var(--ba); }\n@media (hover: hover) and (pointer: fine) { .pcs-back .bk-d, .pcs-back .bk-b { pointer-events: auto; } }\n@media (prefers-reduced-motion: reduce) { .bl { display: none; } .bk-bar { transition: none; } .pcs .pc-pop, .pcs .pt, .pcs .sw-b, .pcs .bm { display: none !important; } } /* purely decorative effects stay off under reduced motion, even when the visitor plays the reel: confetti, blooms */\n/* ---------- the documentation opener (inside the reel, clipped to the card as a window: the camera's frame) ---------- */\n.pcs-docs { position: absolute; inset: 0; border-radius: 18px; overflow: hidden; visibility: visible; opacity: 1; background: radial-gradient(120% 95% at 72% 0%, #33229a 0%, #1c1068 52%, #140a50 100%); --rx: 47deg; --rz: -29deg; --z: .66; --cx: 250; --cy: 560; contain: paint; } /* v22: its first frame (the camera's start, docsCam(0)) is what first paint, SSR, JS-off and reduced motion show */\n.dp-cam { position: absolute; inset: 0; perspective: 900px; perspective-origin: 50% 46%; }\n.dp-pl { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateZ(var(--rz)) scale(var(--z)) translate(calc(var(--cx) * -1px), calc(var(--cy) * -1px)); }\n.dp-pg { position: absolute; overflow: hidden; background: transparent; box-shadow: 0 2px 4px rgb(10 5 50 / .25), 0 24px 48px rgb(8 4 40 / .4); }\n.dp-pg img { display: block; width: 100%; height: 100%; }\n/* ---------- the scrubber (Figma Scrubber set 52:434, short variant on desktop: 268 x 56, the button at (16, 8), the track 180 wide at (72, 8)). Under the card, left-aligned with it. Rest: the play / pause icon only, no background, no handle on the track.\n Hovering the card or the scrubber row: the button's background appears (the carousel arrows' style: 8% ink fill and a 1px 15% inner ring). Hovering the button: its hover state. The handle shows on track hover, focus-visible or drag. Touch screens have no hover, so the button keeps its background there. ---------- */\n.pcs-sb { position: absolute; z-index: 5; left: calc((100cqw - var(--cw)) / 2); top: calc((100cqh - var(--rw) - var(--cw)) / 2 + var(--cw) + 8px); width: var(--cw); height: 56px; padding: 8px 16px; box-sizing: border-box; display: flex; align-items: center; gap: 16px; pointer-events: auto;\n color: var(--pb-c, var(--token-72be4b58-ad30-40d4-9403-e97ffbb2d1b3, #f6f6f6)); }\n@media (min-width: 1200px) { .pcs-sb { left: calc(var(--pcs-gl, 0px) + 24px * var(--S)); top: calc(275px * var(--S)); width: 268px; transform-origin: 0 0; transform: scale(var(--S)); } }\n.pcs-sb[hidden] { display: none; }\n.pcs-pb { position: relative; flex: none; pointer-events: auto; width: 40px; height: 40px; margin: 0; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: inherit; background: transparent; box-shadow: none;\n transition: background-color .2s var(--ease, ease-out), box-shadow .2s var(--ease, ease-out); -webkit-tap-highlight-color: transparent; }\n.pcs-pb:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; background: color-mix(in srgb, currentColor 8%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 15%, transparent); }\n@media (hover: hover) {\n .pcs-sp:has(.pcs-stage:hover) .pcs-pb, .pcs-sb:hover .pcs-pb { background: color-mix(in srgb, currentColor 8%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 15%, transparent); }\n .pcs-sb .pcs-pb:hover { background: color-mix(in srgb, currentColor 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent); }\n}\n@media (hover: none) { .pcs-pb { background: color-mix(in srgb, currentColor 8%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 15%, transparent); } }\n.pcs-pb .pb-ic { display: grid; place-items: center; width: 18px; height: 18px; }\n.pcs-pb .pb-ic svg { width: 18px; height: 18px; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }\n.pcs-tk { position: relative; flex: 1 1 auto; min-width: 0; height: 40px; pointer-events: auto; cursor: pointer; touch-action: pan-y; outline: none; -webkit-tap-highlight-color: transparent; user-select: none; }\n.pcs-tk .tk-bar { position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 3px; background: color-mix(in srgb, currentColor 15%, transparent); }\n.pcs-tk .tk-fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--sp, 0) * 100%); border-radius: 3px; background: currentColor; }\n.pcs-tk .tk-dot { position: absolute; top: 50%; left: calc(var(--sp, 0) * 100%); width: 14px; height: 14px; margin: 0; border-radius: 50%; background: currentColor; transform: translate(-50%, -50%) scale(0); transition: transform .15s ease-out; }\n.pcs-tk:hover .tk-dot, .pcs-sb.drag .tk-dot, .pcs-tk:focus-visible .tk-dot { transform: translate(-50%, -50%) scale(1); }\n.pcs-sb.drag .pcs-tk { cursor: grabbing; }\n.pcs-tk, .pcs-tk:focus, .pcs-tk:focus-visible { outline: none !important; box-shadow: none !important; }\n.pcs-tk:focus-visible .tk-bar { outline: 2px solid currentColor; outline-offset: 7px; }\n`;const PB_PAUSE=``;const PB_PLAY=``;const SC_LABEL=\"Pearson Product Toolkit components: data visualisation, surface stack, brand colours, switches, primary button and a text input\";/* the whole thing as one string: the server renders it, the engine adopts it *//* theme \"ssr\" (server render, before any script has run): drawn light, but under prefers-color-scheme: dark the dark rules apply to it, so a dark-mode visitor never sees a light flash.\n The site's theme switch rewrites prefers-color-scheme in style tags, so this follows the site toggle too. The engine replaces the markup with the resolved theme once it mounts. */function ssrDark(css){const out=[];css.replace(/([^{}]*\\[data-pc-theme=\"dark\"\\][^{}]*)\\{([^{}]*)\\}/g,(_m,sel,body)=>{out.push(`${sel.replace(/^[\\s\\S]*(;|\\*\\/)/,\"\").replace(/\\[data-pc-theme=\"dark\"\\]/g,'[data-pc-theme=\"light\"][data-pc-ssr]')}{${body}}`);return\"\";});return out.length?`@media (prefers-color-scheme: dark) {${out.join(\"\\n\")}}`:\"\";}/* ---------- the backdrop charts (v13): the big donut row (80 / 64 / 47 / 92) and the bar chart, solid, at Ben's 56:62 sizes; decorative (aria-hidden), no focus stops ---------- */const BK={big:87.9,sm:56,gap:14,dn:[340.6,-75.8],bars:[144,238],bw:64,ch:120,base:126,bW:497,bH:130};const BK_ALT=[38,91,12,47];/* where each donut eases to while it is hovered (never above 100, never below 0, always two digits so the number does not change width) */function bkCharts(){let h=\"\";for(let n=0;n<4;n++){const hu=HUES[n],d=n===0?BK.big:BK.sm,x=n===0?0:BK.big+BK.gap+(n-1)*(BK.sm+BK.gap),y=(BK.big-d)/2;const len=(DC*hu.pct/100).toFixed(2);h+=`
`+``+`${hu.pct}%
`;}const BG=(BK.bW-6*BK.bw)/5;let b=``;for(let i=0;i<4;i++)b+=`
`;BAR_H.forEach((hr,i)=>{const bh=hr*BK.ch;b+=`
`;});h+=`
${b}
`;return`
${h}
`;}/* ---------- the documentation opener's scene (v13): three pages of the toolkit's documentation on one tilted plane (the hero art's), the camera glides over them. WebP assets on the branch (Framer image assets), in the markup from the server so the first frame is there at first paint. Plane px = page px. ---------- */const DOCS_IMG={fb:\"https://framerusercontent.com/images/DNKYnJdTwOoECeSCruBSvybwwEc.webp\",ss:\"https://framerusercontent.com/images/towIlRGOBdvfHXvj76C1Wu6KI3k.webp\",btn:\"https://framerusercontent.com/images/hdDLHLeDxEkfxJlrHIJkcvCuxk.webp\",rat:\"https://framerusercontent.com/images/cFcn9FjCklTm28fd3FfuXcoMZok.webp\"};/* v28: four long pages on one plane, side by side at the top (plane px = page px, 2x assets). Each is far taller than the camera ever sees, so no bottom edge shows during the glide. The Button / Primary page now holds the grid itself, under its own header. left, top, width, height, radius */const DOCS_PG={fb:[0,0,500,1616.5,24],ss:[570,0,900,1095.5,17],btn:[1540,0,500,1238,24],rat:[2110,0,500,853,24]};function docsHTML(){const pg=k=>{const[l,t,w,hh,r]=DOCS_PG[k];return`
\"\"
`;};return`
${pg(\"fb\")}${pg(\"ss\")}${pg(\"btn\")}${pg(\"rat\")}
`;}export function showcaseMarkup(theme=\"light\",tall=false){const css=`${SC_CSS}${BASE_CSS}${ringCss}${SWITCH_CSS}${BUTTON_CSS}${INPUT_CSS}${VIZ_CSS}${SK_CSS}${SW_CSS}`;return``+`
`+`
${bkCharts()}
${docsHTML()}
`+`
`;}/* ---------- the engine ---------- *//* v20 autoplay: whether the visitor has paused is remembered for this page session only (this variable: it survives the takeover closing and opening and moving between pages in the site, and is gone on a reload), never in storage.\n v11-v19 kept it in localStorage (\"pcs-paused\"), so one click on Pause made every later visit start paused: the reel looked like it no longer autoplayed. The old key is cleared on mount so nobody is left stuck. */const SC_KEY=\"pcs-paused\";let scSessionPaused=false;/* the documentation opener's camera: where it looks (plane px), and how close, at the start, in the middle (the Colour sticker sheet) and at the end (the Button / Primary page: its grid, with the header above). A quadratic curve through the three, eased in and out, so it never stops dead in the middle. */const DOCS_K=[[480,470,.66],[1020,380,.6],[1790,350,.72]];function docsCam(loc){const t=cl(loc/SC_DOCS_MS),e=.5-.5*Math.cos(Math.PI*t),[a,b,c]=DOCS_K;const k=i=>2*b[i]-(a[i]+c[i])/2;const f=i=>(1-e)*(1-e)*a[i]+2*e*(1-e)*k(i)+e*e*c[i];return[f(0),f(1),f(2)];}const DOCS_H={setTheme(){},setVariant(){},destroy(){},seek(){},replay(){},play(){},time:()=>0,loop:0,variant:\"standard\",curInfo:()=>null,setCurFrom(){}};const SC_KSTEP=2e3,SC_KBIG=1e4/* keyboard: arrows step 2s, PageUp / PageDown 10s */;export function mountShowcase(el,opts={}){const noop={probe:async()=>null,setTheme(){},setMode(){},setBackground(){},pause(){},play(){},toggle(){},paused:()=>false,destroy(){},seek(){},release(){},time:()=>0,loop:()=>0,visibleCount:()=>0,plan:()=>[]};if(typeof document===\"undefined\")return noop;injectOnce(\"pc-base\",BASE_CSS+ringCss);injectFont();let themeOpt=opts.theme||\"auto\";let mode=opts.mode===\"single\"?\"single\":\"slideshow\";let bgMode=opts.background||\"none\";const resolve=()=>themeOpt===\"auto\"?siteIsDark(el)?\"dark\":\"light\":themeOpt;let theme=resolve();el.innerHTML=showcaseMarkup(theme,!!opts.tall);el.classList.add(\"pc-host\");const host=el.querySelector(\".pcs\");const bgEl=host.querySelector(\".pcs-bg\");const reelEl=host.querySelector(\".pcs-reel\");const restEl=host.querySelector(\".pcs-rest\");const sb=host.querySelector(\".pcs-sb\");const pb=host.querySelector(\".pcs-pb\");const pbIc=pb.querySelector(\".pb-ic\");const tk=host.querySelector(\".pcs-tk\");const stageEl=host.querySelector(\".pcs-stage\");let layout=scLayout(mode);/* the stage in use, read from the layout (so first paint and the engine always agree): boxier or landscape (container query on the box's ratio), its logical size and scale, the r that keeps the pieces at the size they had,\n how far the box's top and bottom are from the stage's centre (logical px), where the pause button is (relative to that centre), and each piece's extra fit factor. Returns true when anything the cursors' hand-over depends on changed. */let dirty=3,uDrawn=-1/* dirty: frames still to redraw after a change of layout, theme or pause, so the pieces settle on exactly the frame the clock is on */;let stg=SC_LAND;let stgKey=\"\";const mqMob=typeof matchMedia!==\"undefined\"?matchMedia(\"(max-width: 1199.98px)\"):null;const readStage=()=>{/* v22: the stage IS the card. Desktop: 551.7 x 287.6 logical px scaled by --S; below 1200: the 460 x 460 square scaled to the card's width. Each piece's body is fitted to fill about SC_FILL of the card (scK0); its effects may pass beyond it. */const cs=getComputedStyle(stageEl),lw=stageEl.offsetWidth,lh=stageEl.offsetHeight;const m=parseFloat((cs.transform.match(/matrix\\(([-\\d.e]+)/)||[])[1]||\"\")||0;if(!lw||!lh||!m||!host.clientHeight)return false;const sq=cs.getPropertyValue(\"--sqm\").trim()===\"1\";const sr=stageEl.getBoundingClientRect(),scr=sr.width/lw||m;const gap=Math.min(sr.left,(document.documentElement.clientWidth||innerWidth)-sr.right);const al=Math.max(0,Math.min(SC_FX_GAP,gap-8))/scr/* the room the click effects may use beyond the card, in the card's own logical px */;const key=[sq,lw,lh,m.toFixed(4),al.toFixed(1)].join(\"|\");if(key===stgKey)return false;stgKey=key;const n={W:lw,H:lh,sq,m,al,kd:[]};const old=stg;stg=n;n.kd=SC_PLAN.map((p,i)=>p.dyn?scKdArr(i,n):null);dirty=3;return old.sq!==n.sq||Math.abs(old.m-n.m)>1e-4||old.W!==n.W||old.H!==n.H||Math.abs(old.al-n.al)>.05||SC_PLAN.some((p,i)=>!p.docs&&Math.abs(scK(i,old)-scK(i,n))>1e-4);};readStage();let wave=null;const waveInt=b=>b===\"hero\"?.42:.35;const setWave=()=>{if(bgMode===\"none\"){wave?.destroy();wave=null;return;}if(!wave)wave=mountWave(bgEl,{theme:themeOpt===\"auto\"?\"auto\":theme,intensity:waveInt(bgMode),mode:bgMode});else{wave.setMode(bgMode);wave.setIntensity(waveInt(bgMode));}waveFrozen=null;};let waveFrozen=null;setWave();const mq=typeof matchMedia!==\"undefined\"?matchMedia(\"(prefers-reduced-motion: reduce)\"):null;let rm=!!mq?.matches;let userPaused=false;userPaused=scSessionPaused||rm/* reduced motion: like a video that does not autoplay. The first frame, paused; the visitor can press play or scrub. */;try{localStorage.removeItem(SC_KEY);}catch{}const slots=[];const bucket=[];let u=0,last=performance.now(),raf=0,destroyed=false,visible=true,held=false;let ttT=0;const paused=()=>userPaused;let scrubbing=false;const SEC=ms=>Math.round(ms/1e3);const syncButton=()=>{sb.hidden=false;/* hidden in the server's markup (JS-off has nothing to drive it); under reduced motion it stays, so the visitor can press play or scrub */const p=userPaused;pb.setAttribute(\"aria-label\",p?\"Play animation\":\"Pause animation\");pbIc.innerHTML=p?PB_PLAY:PB_PAUSE;tk.setAttribute(\"aria-valuemax\",String(SEC(layout.T)));readStage();};syncButton();const ensurePieces=()=>{if(slots.length||destroyed)return;SC_PLAN.forEach(p=>{if(p.docs){const el=reelEl.querySelector(\".pcs-docs\");slots.push({el,h:DOCS_H,blur:()=>{},on:false,cur:null,ci:[],cf:1,fx:1,dm:-1});return;}const s=mkEl(\"div\",\"pcs-slot\",reelEl);if(p.part)s.setAttribute(\"data-part\",p.part);curBucket=bucket;const blur=mkBlur(s);curBucket=[];const h=PIECES[p.name].mount(s,{theme,variant:p.variant,embedded:true});h.seek(p.segs[0][0]);slots.push({el:s,h,blur,on:false,cur:s.querySelector(\".pc-cur\"),ci:Array.from(s.querySelectorAll(\".pc-cur .ci\")),cf:1,fx:1,dm:-1});});linkCursors();dirty=3;};/* one shared cursor across the reel: each cursor piece starts from where the previous cursor piece (cyclically) last left it, in stage coordinates */const linkCursors=()=>{if(!slots.length)return;const cps=slots.map((s,i)=>({i,info:s.h.curInfo()})).filter(c=>c.info);cps.forEach((c,n)=>{const pv=cps[(n+cps.length-1)%cps.length],a=SC_PLAN[pv.i],b=SC_PLAN[c.i],ia=pv.info,ib=c.info;const sa=ia.sc(ia.outAt(a.segs[a.segs.length-1][1])),sb=ib.sc(ib.tIn);/* the camera at the moment the cursor was last seen in the stretch of the previous piece the reel plays */const lx=320+sa*(ia.last.x-320),ly=240+sa*(ia.last.y-240);const oa=scShift(pv.i,scLocOf(a,a.segs[a.segs.length-1][1]),stg),ob=scShift(c.i,scLocOf(b,ib.tIn),stg),ka=scKt(pv.i,scLocOf(a,a.segs[a.segs.length-1][1]),stg),kb=scKt(c.i,scLocOf(b,ib.tIn),stg);const sx=stg.W/2+oa.tx+ka*(lx-320),sy=stg.H/2+oa.ty+ka*(ly-240);/* where the previous cursor was last seen, on the stage */const mx=320+(sx-stg.W/2-ob.tx)/kb,my=240+(sy-stg.H/2-ob.ty)/kb;slots[c.i].h.setCurFrom({x:320+(mx-320)/sb,y:240+(my-240)/sb});});};const setPaused=(p,remember)=>{userPaused=p;if(remember)scSessionPaused=p;dirty=3;syncButton();if(!p){ensurePieces();last=performance.now();}};const onClick=()=>setPaused(!userPaused,true);pb.addEventListener(\"click\",onClick);/* ---------- the scrubber: the track's position is the reel clock ---------- */let pid=-1,spLast=\"\",avLast=\"\";const fromX=cx=>{const r=tk.getBoundingClientRect();return(r.width?cl((cx-r.left)/r.width):0)*layout.T;};const onDown=e=>{if(scrubbing||e.pointerType===\"mouse\"&&e.button!==0)return;ensurePieces();pid=e.pointerId;try{tk.setPointerCapture(e.pointerId);}catch{}scrubbing=true;sb.classList.add(\"drag\");u=fromX(e.clientX);/* the browser focuses the track itself (a pointer focus, so no ring) */};const onMove=e=>{if(scrubbing&&e.pointerId===pid)u=fromX(e.clientX);};const onUp=e=>{if(!scrubbing||e.pointerId!==pid)return;u=fromX(e.clientX);scrubbing=false;sb.classList.remove(\"drag\");last=performance.now();try{tk.releasePointerCapture(e.pointerId);}catch{}};const onKey=e=>{let d=0,to=null;switch(e.key){case\"ArrowRight\":case\"ArrowUp\":d=SC_KSTEP;break;case\"ArrowLeft\":case\"ArrowDown\":d=-SC_KSTEP;break;case\"PageUp\":d=SC_KBIG;break;case\"PageDown\":d=-SC_KBIG;break;case\"Home\":to=0;break;case\"End\":to=layout.T;break;default:return;}e.preventDefault();ensurePieces();u=to!==null?to:cl(u+d,0,layout.T);last=performance.now();};tk.addEventListener(\"pointerdown\",onDown);tk.addEventListener(\"pointermove\",onMove);tk.addEventListener(\"pointerup\",onUp);tk.addEventListener(\"pointercancel\",onUp);tk.addEventListener(\"keydown\",onKey);/* ---------- the backdrop charts' hover (v13; pointer devices only, decorative, off under reduced motion) ----------\n Bloom: the foil cards' hover glow as a soft colour that follows the pointer, in the chart's own colour (CSS: .bl, transform and opacity only). Bars: the one under the pointer rises a little and its neighbours ease (a gentle wave across levels), scaleY from the base. Donuts: the arc and the number ease to a new\n value over 600ms (counting up and down, never above 100 or below 0, the number changes in place) and return on leave. */const bkOff=[];const backEl=host.querySelector(\".pcs-back\");if(backEl&&typeof matchMedia!==\"undefined\"&&matchMedia(\"(hover: hover) and (pointer: fine)\").matches){const local=(el,e)=>{const r=el.getBoundingClientRect(),k=r.width/(el.offsetWidth||1)||1;return[(e.clientX-r.left)/k,(e.clientY-r.top)/k];};const setB=(el,e)=>{const[x,y]=local(el,e);el.style.setProperty(\"--bx\",x.toFixed(1));el.style.setProperty(\"--by\",y.toFixed(1));};const on=(el,ev,fn)=>{el.addEventListener(ev,fn);bkOff.push(()=>el.removeEventListener(ev,fn));};const dns=Array.from(backEl.querySelectorAll(\".bk-d\")).map((el,n)=>({el,arc:el.querySelector(\".bk-arc\"),tx:el.querySelector(\"span\"),base:+el.dataset.v,alt:BK_ALT[n],v:+el.dataset.v,from:0,to:+el.dataset.v,t0:0}));let dRaf=0;const dStep=now=>{let busy=false;for(const d of dns){const k=SOFT(cl((now-d.t0)/600));d.v=cl(d.from+(d.to-d.from)*k,0,100);if(k<1)busy=true;d.arc.setAttribute(\"stroke-dasharray\",`${(DC*d.v/100).toFixed(2)} ${DC.toFixed(2)}`);const t=Math.round(d.v)+\"%\";if(d.tx.textContent!==t)d.tx.textContent=t;}dRaf=busy?requestAnimationFrame(dStep):0;};const dGo=(d,to)=>{d.from=d.v;d.to=to;d.t0=performance.now();if(!dRaf)dRaf=requestAnimationFrame(dStep);};dns.forEach(d=>{on(d.el,\"pointerenter\",e=>{if(rm)return;setB(d.el,e);d.el.classList.add(\"hot\");dGo(d,d.alt);});on(d.el,\"pointermove\",e=>{if(!rm)setB(d.el,e);});on(d.el,\"pointerleave\",()=>{d.el.classList.remove(\"hot\");dGo(d,d.base);});});const bg=backEl.querySelector(\".bk-b\");if(bg){const bars=Array.from(bg.querySelectorAll(\".bk-bar\")),pitch=BK.bw+(BK.bW-6*BK.bw)/5;const wave=e=>{const[x]=local(bg,e),c=cl(Math.round((x-BK.bw/2)/pitch),0,5);bars.forEach((b,j)=>b.style.setProperty(\"--s\",(1+.09*Math.exp(-((j-c)**2)/1.6)).toFixed(4)));};on(bg,\"pointerenter\",e=>{if(rm)return;setB(bg,e);bg.classList.add(\"hot\");wave(e);});on(bg,\"pointermove\",e=>{if(rm)return;setB(bg,e);wave(e);});on(bg,\"pointerleave\",()=>{bg.classList.remove(\"hot\");bars.forEach(b=>b.style.setProperty(\"--s\",\"1\"));});}bkOff.push(()=>cancelAnimationFrame(dRaf));}const renderReel=()=>{const{items,T,xf}=layout;let vis=0;let stageRect=null;items.forEach(it=>{const s=slots[it.i],p=SC_PLAN[it.i];if(!s)return;let loc=u-it.start;if(loc<0||loc>it.L)loc=u+T-it.start;const dTail=p.docs&&u>T-xf/* v28: the end of the loop: the opener's first frame fades in (loc 0) */;if(dTail)loc=0;const on=dTail||loc>=0&&loc<=it.L;if(!on){if(s.on){s.el.style.visibility=\"hidden\";s.el.style.opacity=\"0\";s.blur(0,0);s.on=false;}return;}vis++;const kin=cl(loc/SC_IN),eIn=SOFT(kin);const kout=cl((loc-(it.L-SC_OUT))/SC_OUT),eOut=SOFT(kout);const op=sstep((loc-30)/(SC_IN*.7))*(1-sstep(kout*1.25));if(p.docs){const d1=items[1].start-it.start;const[cx,cy,z]=docsCam(loc);if(!s.on){s.el.style.visibility=\"visible\";s.on=true;}s.el.style.opacity=(dTail?sstep((u-(T-xf))/xf):1-sstep((loc-(d1+380))/200)).toFixed(3);s.el.style.zIndex=String(1e3-Math.round(loc));s.el.style.setProperty(\"--cx\",cx.toFixed(1));s.el.style.setProperty(\"--cy\",cy.toFixed(1));s.el.style.setProperty(\"--z\",z.toFixed(4));return;}const sh=scShift(it.i,loc,stg),pk=scKt(it.i,loc,stg);const ty=sh.ty+16*(1-eIn)-8*eOut;const sc=pk*(.97+.03*eIn)*(1-.06*eOut);const tx=sh.tx;const by=3*Math.pow(1-eIn,2)+2.2*Math.sin(Math.PI*kout);if(!s.on){s.el.style.visibility=\"visible\";s.on=true;}const fxd=SC_FX[it.i];if(fxd){const fx=Math.min(1,(stg.W/2+stg.al)/(pk*fxd[0]),(stg.H/2+stg.al)/(pk*fxd[1]));if(Math.abs(fx-s.fx)>.003){s.fx=fx;s.el.style.setProperty(\"--fx\",fx.toFixed(4));}}if(fxd){/* v24: how far (button px) a click ring may be from the pill's edge: the ring's outer edge stays within the card plus the allowance al. Half-width of the pill 85 (Start lesson) or 75.5 (Continue), half-height 22, the pill sits S = 2.4 in the slot. */const hw=it.i===1?85:75.5,kk=sc*2.4*1.065/* the camera's own zoom (about 1.05) and tilt */;const dm=Math.max(4,Math.min(82,(stg.W/2+stg.al-Math.abs(tx))/kk-hw,(stg.H/2+stg.al-Math.abs(ty))/kk-22));if(Math.abs(dm-s.dm)>.2){s.dm=dm;s.el.style.setProperty(\"--dm\",dm.toFixed(2));}}s.el.style.opacity=op.toFixed(3);s.el.style.transform=`translate3d(${tx.toFixed(2)}px,${ty.toFixed(2)}px,0) scale(${sc.toFixed(4)})`;s.el.style.zIndex=String(1e3-Math.round(loc));s.blur(0,by);s.h.seek(scPieceTime(p,loc));/* a cursor never paints outside the stage (so never down at the scrubber or up past the top line): it enters through the corner and leaves through it by fading across the stage's edge.\n Its glyph's real box (measured) may reach 4px past the edge at full strength; by 16px past, it is gone. */let cfv=1;if(s.cur&&parseFloat(s.cur.style.opacity)>.01){const g=s.ci.find(e=>parseFloat(e.style.opacity)>.5);if(g){const r=g.getBoundingClientRect(),S=stageRect??(stageRect=stageEl.getBoundingClientRect());const over=Math.max(0,r.right-S.right,r.bottom-S.bottom,S.left-r.left,S.top-r.top);cfv=1-sstep((over-4)/12);}}if(Math.abs(cfv-s.cf)>.004){s.cf=cfv;s.el.style.setProperty(\"--cf\",cfv.toFixed(3));}});return vis;};let lastVis=0;let probing=false;const frame=now=>{if(destroyed)return;raf=requestAnimationFrame(frame);const dt=Math.min(100,now-last);last=now;/* a video's pause: the clock stops, and nothing else moves. The reel is a pure function of u, so the frame on screen is exactly the frame it stopped on (the active piece and its cursor included). It is only redrawn when u changes (play, scrub, keyboard) or the layout does. */const running=!held&&visible&&!document.hidden&&!userPaused&&!scrubbing&&slots.length>0;if(running){u+=dt;if(u>=layout.T)u=u%layout.T;}if(!probing&&slots.length&&(u!==uDrawn||dirty>0)){if(u===uDrawn)dirty--;else dirty=Math.max(dirty,1);uDrawn=u;lastVis=renderReel()||0;}/* the scrubber: where the clock is, as a share of the loop; the slider's value is whole seconds */const sp=cl(u/layout.T).toFixed(4);if(sp!==spLast){spLast=sp;tk.style.setProperty(\"--sp\",sp);}const sec=SEC(u),av=sec+\"|\"+SEC(layout.T);if(av!==avLast){avLast=av;tk.setAttribute(\"aria-valuenow\",String(sec));tk.setAttribute(\"aria-valuetext\",`${sec} of ${SEC(layout.T)} seconds`);}/* the shader holds still with the reel when paused */const wf=userPaused;if(wave&&wf!==waveFrozen){waveFrozen=wf;wave.setFrozen(wf);}};raf=requestAnimationFrame(frame);/* start: after the first paint, so the first frame is already on screen; then the reel plays on from it, unless paused (reduced motion starts paused) */const starter=window.setTimeout(()=>{if(!paused())ensurePieces();},60);const io=typeof IntersectionObserver!==\"undefined\"?new IntersectionObserver(es=>{visible=es[es.length-1].isIntersecting;last=performance.now();}):null;io?.observe(el);const ro=typeof ResizeObserver!==\"undefined\"?new ResizeObserver(()=>{if(readStage())linkCursors();}):null;ro?.observe(host);ro?.observe(stageEl);const onMq=()=>{rm=!!mq?.matches;if(rm&&!userPaused)setPaused(true,false);}/* switching reduced motion on pauses, like a video; the visitor can play */;mq?.addEventListener?.(\"change\",onMq);const onMob=()=>{if(readStage())linkCursors();};mqMob?.addEventListener?.(\"change\",onMob);const applyTheme=()=>{const n=resolve();if(n===theme)return;theme=n;host.classList.add(\"pc-tt\");host.setAttribute(\"data-pc-theme\",n);slots.forEach(s=>s.h.setTheme(n));dirty=3;clearTimeout(ttT);ttT=window.setTimeout(()=>host.classList.remove(\"pc-tt\"),480);};const poll=window.setInterval(()=>{if(themeOpt===\"auto\")applyTheme();},500);window.addEventListener(\"themeChange\",applyTheme);/* offline tool (used by the build harness to bake SC_CEN, never by the page): slot i at reel-local time loc, identity transform, the centre and size of its visible content in slot pixels */const SKIP=\".pc-cur,.pc-rip,.pc-dot,.pc-pop,.pc-shock,.pc-pulse,.pc-fr,.pc-rp,.pt,.pc-bl\";const probe=async(i,loc,hold=false)=>{ensurePieces();const s=slots[i],p=SC_PLAN[i];probing=true;slots.forEach(q=>{if(q!==s&&q.on){q.el.style.visibility=\"hidden\";q.el.style.opacity=\"0\";q.on=false;}});/* the documentation scene (and any other piece) must not cover the one being measured */reelEl.style.visibility=\"visible\";reelEl.style.opacity=\"1\";s.el.style.visibility=\"visible\";s.el.style.opacity=\"1\";s.el.style.transform=\"none\";s.on=true;s.h.seek(scPieceTime(p,loc));await new Promise(r=>requestAnimationFrame(()=>requestAnimationFrame(r)));const O=s.el.getBoundingClientRect(),sc=O.width/640;let x0=1e9,y0=1e9,x1=-1e9,y1=-1e9;const add=(r,clip)=>{const l=Math.max(r.left,clip.left),t=Math.max(r.top,clip.top),rr=Math.min(r.right,clip.right),bb=Math.min(r.bottom,clip.bottom);if(rr-l<.5||bb-t<.5)return;x0=Math.min(x0,l);y0=Math.min(y0,t);x1=Math.max(x1,rr);y1=Math.max(y1,bb);};const win={left:O.left-160*sc,top:O.top-120*sc,right:O.right+160*sc,bottom:O.bottom+120*sc}/* generous: the true extent of the content is wanted, whatever the stage */;s.el.querySelectorAll(\"*\").forEach(e=>{if(e.closest(SKIP)||e.closest(\"defs,filter,mask,clipPath,pattern,style\"))return;if(e.namespaceURI===\"http://www.w3.org/2000/svg\"&&e.tagName.toLowerCase()!==\"svg\")return;let op=1,n=e;const clip={...win};while(n&&n!==s.el){const cs=getComputedStyle(n);if(cs.display===\"none\"||cs.visibility===\"hidden\")return;op*=+cs.opacity;if(n!==e&&(cs.overflowX!==\"visible\"||cs.overflowY!==\"visible\")){const r=n.getBoundingClientRect();clip.left=Math.max(clip.left,r.left);clip.top=Math.max(clip.top,r.top);clip.right=Math.min(clip.right,r.right);clip.bottom=Math.min(clip.bottom,r.bottom);}n=n.parentElement;}if(op<.25)return;const cs=getComputedStyle(e);const txt=Array.from(e.childNodes).some(c=>c.nodeType===3&&(c.textContent||\"\").trim());const bg=cs.backgroundImage!==\"none\"||!/rgba\\(\\d+, \\d+, \\d+, 0\\)|transparent/.test(cs.backgroundColor);const bd=parseFloat(cs.borderTopWidth)>0&&!/, 0\\)/.test(cs.borderTopColor);if(e.tagName.toLowerCase()===\"svg\"&&e.parentElement?.closest(\"svg\")==null){add(e.getBoundingClientRect(),clip);return;}if(txt){const rg=document.createRange();rg.selectNodeContents(e);add(rg.getBoundingClientRect(),clip);return;}if(bg||bd)add(e.getBoundingClientRect(),clip);});probing=hold/* the ink-extent tool keeps the slot posed (hold) while it screenshots it */;if(x0>1e8)return null;return{cx:((x0+x1)/2-O.left)/sc,cy:((y0+y1)/2-O.top)/sc,w:(x1-x0)/sc,h:(y1-y0)/sc};};const h={probe,setTheme(t){themeOpt=t;wave?.setTheme(t===\"auto\"?\"auto\":t);applyTheme();},setMode(m){const nm=m===\"single\"?\"single\":\"slideshow\";if(nm===mode)return;mode=nm;layout=scLayout(mode);u=0;syncButton();slots.forEach(s=>{s.on=false;s.el.style.visibility=\"hidden\";s.el.style.opacity=\"0\";});},setBackground(b){bgMode=b;setWave();},pause(){setPaused(true,true);},play(){setPaused(false,true);},toggle(){setPaused(!userPaused,true);},paused:()=>paused(),seek(ms){held=true;u=(ms%layout.T+layout.T)%layout.T;dirty=3;},release(){held=false;probing=false;dirty=3;last=performance.now();},time:()=>u,loop:()=>layout.T,visibleCount:()=>lastVis,plan:()=>layout.items.map(it=>({name:SC_PLAN[it.i].name+(SC_PLAN[it.i].part?\"-\"+SC_PLAN[it.i].part:\"\"),start:it.start,end:it.end})),destroy(){if(destroyed)return;destroyed=true;cancelAnimationFrame(raf);clearTimeout(starter);clearTimeout(ttT);clearInterval(poll);io?.disconnect();ro?.disconnect();mq?.removeEventListener?.(\"change\",onMq);mqMob?.removeEventListener?.(\"change\",onMob);window.removeEventListener(\"themeChange\",applyTheme);pb.removeEventListener(\"click\",onClick);tk.removeEventListener(\"pointerdown\",onDown);tk.removeEventListener(\"pointermove\",onMove);tk.removeEventListener(\"pointerup\",onUp);tk.removeEventListener(\"pointercancel\",onUp);tk.removeEventListener(\"keydown\",onKey);bkOff.forEach(f=>f());slots.forEach(s=>s.h.destroy());bucket.forEach(b=>b.remove());wave?.destroy();wave=null;el.innerHTML=\"\";el.classList.remove(\"pc-host\");const w=window;if(w.__pcs)w.__pcs=w.__pcs.filter(x=>x!==h);}};const w=window;(w.__pcs=w.__pcs||[]).push(h);return h;}export default function PearsonShowcase({mode=\"slideshow\",background=\"none\",theme=\"auto\",clear=false,tall=false}){const ref=React.useRef(null);const h=React.useRef(null);const props=React.useRef({mode,background,theme,tall});props.current={mode,background,theme,tall};const html=React.useMemo(()=>showcaseMarkup(theme===\"dark\"?\"dark\":theme===\"light\"?\"light\":\"ssr\",tall),[]);React.useEffect(()=>{const el=ref.current;if(!el)return;h.current=mountShowcase(el,props.current);return()=>{h.current?.destroy();h.current=null;};},[]);React.useEffect(()=>{h.current?.setTheme(theme);},[theme]);React.useEffect(()=>{h.current?.setMode(mode);},[mode]);React.useEffect(()=>{h.current?.setBackground(background);},[background]);return /*#__PURE__*/_jsx(\"div\",{ref:ref,className:clear?\"pc-clear\":undefined,style:{position:\"relative\",width:\"100%\",height:\"100%\"},dangerouslySetInnerHTML:{__html:html}});}export const SC_INTERNAL={plan:SC_PLAN,layout:scLayout,pieceTime:scPieceTime,step:SC_CEN_STEP};/*CEN-BEGIN*/const SC_BOX={\"1\":[429,112],\"2\":[522,396],\"3\":[413,341],\"4\":[394,468],\"5\":[577,249],\"6\":[397,317],\"7\":[653,389],\"8\":[381,111]};const SC_CEN={\"1\":[318.6,240,318.6,240,318.6,240,318.6,240,318.6,240,318.6,240,318.6,240,318.6,240,318.6,240,318.6,240,318.6,240,318.6,240,318.6,240,318.6,240,318.6,240,318.6,240,318.6,240,318.6,240,318.6,240,318.6,240,318.6,240,318.6,240,318.6,240,318.6,240,318.6,240,318.6,240,318.6,240,318.6,240,318.6,240,318.6,240,318.6,240,318.6,240,318.6,240,318.6,240,318.6,240,318.6,240,318.6,240,318.6,240,318.6,240,318.6,240,318.6,240],\"2\":[320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222,320,222],\"3\":[318.9,240,318.9,240,318.9,240,318.9,240,318.9,240,318.9,240,318.8,239.9,318.8,239.9,318.8,239.9,318.8,240.1,318.8,240.4,318.7,240.6,318.8,240.7,318.9,240.6,319,240.3,319.1,240,319.1,239.6,319.1,239.1,319,238.8,319,238.6,319,238.7,319.1,239,319.1,239.2,319.2,239.4,319.2,239.5,319.2,239.5,319.3,239.5,319.3,239.5,319.4,239.5,319.5,239.5,319.5,239.5,319.6,239.5,319.6,239.5,319.7,239.5,319.8,239.5,319.8,239.5,319.9,239.5,319.9,239.5,320,239.5,320,239.5,320,239.5,320,239.5,320,239.5,320,239.5,320,239.5,320,239.5,320,239.5,320,239.5,320,239.5,320,239.5,320,239.5,320,239.5,320,239.5,320,239.5,320,239.5,320,239.5,320,239.5,320,239.5,320,239.5,320,239.5],\"4\":[318.9,50.8,318.9,50.8,318.9,50.7,318.9,50.3,318.9,49.1,318.9,47.5,318.9,45.7,318.9,44.4,318.9,43.7,318.9,49.9,319,77.1,319,125.5,319.1,179.5,319.1,219.3,319.2,236,319.2,237.9,319.3,238.1,319.4,238.2,319.4,238.2,319.5,238.2,319.6,238.2,319.7,238.2,319.7,238.3,319.8,238.3,319.9,238.3,320,238.4,320.1,238.5,320.1,238.6,320.2,238.7,320.3,238.8,320.4,238.9,320.5,239.1,320.5,239.2,320.6,239.3,320.7,239.4,320.7,239.6,320.8,239.7,320.9,239.8,320.9,239.9,321,240,321,240.1,321,240.2,321.1,240.3,321.1,240.4,321.1,240.5,321.1,240.6,321.2,240.6,321.2,240.7,321.2,240.7,321.2,240.8,321.2,240.8,321.2,240.9,321.1,240.9,321.1,240.9,321.1,240.9,321.1,240.9,321,240.9,321,240.9,320.9,240.8,320.9,240.8,320.8,240.8,320.8,240.7,320.7,240.4,320.6,233,320.6,204.5,320.5,155.2,320.4,101.5,320.3,63,320.3,48,320.3,47.3,320.3,47.6,320.3,47.7,320.3,47.7,320.3,47.7,320.3,47.7,320.3,47.7,320.3,47.7,320.3,47.7,320.3,47.7,320.3,47.7,320.3,47.7,320.3,47.7,320.3,47.7,320.3,47.7,320.3,47.7,320.3,47.7,320.3,47.7,320.3,47.7,320.3,47.7],\"5\":[321.6,238,321.6,238,321.6,238,321.5,238,321.5,238,321.4,238,321.3,237.9,321.2,237.9,321.1,237.9,321,237.8,320.9,237.8,320.8,237.7,320.7,237.7,320.6,237.6,320.5,237.5,320.4,237.5,320.2,237.4,320.1,237.4,320,237.3,319.9,237.3,319.8,237.3,319.6,237.3,319.5,237.3,319.4,237.3,319.3,237.3,319.2,237.3,319,237.3,318.9,237.3,318.9,237.4,318.8,237.4,318.7,237.4,318.3,237.4,317.8,237.4,317.5,237.4,317.5,237.4,317.7,237.4,317.9,237.4,317.9,237.5,317.9,237.5,317.8,237.5,317.8,237.5,317.8,237.4,317.7,237.4,317.7,237.4,317.7,237.4,317.6,237.4,317.6,237.4,317.6,237.4,317.5,237.4,317.5,237.4,317.5,237.4,317.5,237.4,317.5,237.4,317.5,237.4,317.5,237.4,317.6,237.4,317.6,237.4,317.6,237.4,317.7,237.4,317.7,237.4,317.8,237.4,317.8,237.4,317.9,237.4,318,237.4,318.1,237.4,318.1,237.4,318.2,237.4,318.3,237.5,318.4,237.5,318.4,237.5,318.2,237.5,317.9,237.5,317.5,237.5,317.5,237.6,317.8,237.6,318.4,237.6,319,237.6,319.4,237.6,319.6,237.7,319.7,237.7,319.9,237.7,320,237.7,320.1,237.7,320.2,237.8,320.3,237.8,320.3,237.8,320.4,237.8,320.4,237.8,320.4,237.8,320.4,237.8,320.4,237.8,320.4,237.8,320.4,237.8,320.4,237.8,320.4,237.8,320.4,237.8,320.4,237.8,320.4,237.8,320.4,237.8,320.4,237.8],\"6\":[378,336.4,378,336.4,378,336.4,378,336.4,378,336.4,378,336.4,378,336.4,378,336.2,378,334.6,378,330.1,378,322.6,378,313.3,378,303.5,378,294.4,378,285.8,378,277.1,378,269.1,378,262.8,378,259.4,378,259,378,259.9,378,260.7,378,260.9,378,260.7,378,260.5,378,260.5,378,260.5,378,260.5,378,260.5,378,260.5,378,260.5,378,260.5,378,260.5,378,260.5,378,260.5,378,260.5,378,260.5,378,260.5,378,260.5,378,260.5,378,260.5,378,260.5,378,260.5,378,260.5,378,260.5,378,260.5,378,260.5,378,260.5,378,260.5,378,260.5,378,260.5,378,260.5,378,260.5,378,260.5,378,260.5,378,260.5,378,260.5,378,260.5,378,260.5,378,260.5,378,260.5,378,260.5,378,260.5,378,260.5,378,260.5,378,260.5,378,260.5,378,260.5,378,260.5,378,260.5,378,260.5,378,260.5,378,260.5,378,260.7,378,261.9,378,265.2,378,271.3,378,280,378,290.8,378,302.3,378,313.1,378,321.9,378,327.8,378,331,378,332.3,378,332.6,378,332.6,378,332.6,378,332.6,378,332.6,378,332.6,378,332.6,378,332.6,378,332.6,378,332.6,378,332.6,378,332.6,378,332.6,378,332.6,378,332.6,378,332.6,378,332.6,378,332.6,378,332.6],\"7\":[320,240,320,240,320,240,319.8,239.8,319.3,239.2,318,238,316.6,236.2,316,233.7,316.7,230.9,318.1,228.6,319.4,227.3,319.9,227.2,320,227.9,320.4,228.8,322.3,229.4,325,229.7,326.1,229.8,323.3,230.5,318.1,232.3,314.3,235.2,314.4,238.9,316.8,242.8,319.2,246,320,248.1,320,248.9,320,249,320,249,320,249,320,249,320,248.9,320,248.2,320,246.4,320,243.9,320,241.6,320,240.3,320,240,320,240,320,240,320,240,320,240,320,240,320,240,320,240,320,240,320,240,320,240,320,240,320,240,320,240,320,240,320,240,320,240,320,240,320,240,320,240,320,240,320,240,320,240,320,240,320,240,320,240,320,240,320,240,320,240,320,240],\"8\":[320,240,320,240,320,240,320,240,320,240,320,240,320,240,320,240,320,240,320,240,320,240,320,240,320,240,320,240,320,240,320,240,320,240,320,240,320,240,320,240,320,240,320,240,320,240,320,240,320,240,320,240,320,240,320,240,320,240,320,240,320,240,320,240,320,240,320,240,320,240,320,240,320,240,320,240,320,240,320,240,320,240,320,240,320,240,320,240,320,240,320,240,320,240,320,240,320,240,320,240,320,240,320,240]};const SC_DIM={\"4\":[378,75,378,75,378,75,378,75,378,75,385,76,389,77,392,77,393,78,393,78,393,78,393,78,394,462,394,465,394,467,394,467,394,467,394,467,394,467,394,467,394,467,394,467,394,466,394,466,394,466,393,466,393,466,393,466,393,466,393,466,393,466,393,466,393,466,393,466,393,466,392,466,392,466,392,466,392,466,392,466,392,466,392,466,392,466,392,466,392,466,392,466,393,466,393,466,393,466,393,466,393,466,393,466,393,466,393,466,393,466,393,466,393,466,393,466,394,466,394,466,394,466,394,466,394,466,394,466,391,463,391,454,391,75,391,75,386,74,385,74,385,74,385,74,385,74,385,74,385,74,385,74,385,74,385,74,385,74,385,74,385,74,385,74,385,74,385,74,385,74,385,74,385,74,385,74,385,74]}/*CEN-END*/;\nexport const __FramerMetadata__ = {\"exports\":{\"mountSwatchesUp\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"mountSliderStd\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"mountSwitch\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"mountSwitchUp\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"CurCfg\":{\"type\":\"tsType\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"PieceName\":{\"type\":\"tsType\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"PCOpts\":{\"type\":\"tsType\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"mountButtonPart\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"mountDateStd\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"mountStackStd\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"mountSliderUp\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"mountStack\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"ShowcaseHandle\":{\"type\":\"tsType\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"mountStackCombo\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"PVariant\":{\"type\":\"tsType\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"ShowcaseOpts\":{\"type\":\"tsType\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"mountInputUp\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"mountSlider\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"mountDateUp\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"mountShowcase\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"ShowcaseTheme\":{\"type\":\"tsType\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"showcaseMarkup\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"mountSwitchStd\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"mountInputStd\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"default\":{\"type\":\"reactComponent\",\"name\":\"PearsonShowcase\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"PCHandle\":{\"type\":\"tsType\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"mountDate\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"mountStackUp\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"SC_INTERNAL\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"mountSwatchesStd\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"mountInput\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"mountVizStd\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"mountVizUp\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"mountViz\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"mountButtonUp\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"PIECES\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"ShowcaseBackground\":{\"type\":\"tsType\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"ShowcaseMode\":{\"type\":\"tsType\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"mountButton\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"mountSwatches\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"mountButtonStd\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./PearsonComponents.map","import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from\"react/jsx-runtime\";import{useCallback,useEffect,useRef}from\"react\";import{useRouter}from\"framer\";import{liveCaseStudies}from\"https://framerusercontent.com/modules/zU36YQ7RXtHs4CkPKslb/uryH04OsavWGEk82q9C9/CmsCaseStudies.js\";import\"https://framerusercontent.com/modules/NaVM54w8Ymh9lTyfHrMz/9muDJnVqpvYKVtb4ddx8/BackNav.js\";import{mountShowcase}from\"https://framerusercontent.com/modules/FLCdAaN7a8w5U5QJyuEt/WqPvx9tl7izwlav3QIes/PearsonComponents.js\";/**\n * Foil card: the case-study cards from Case Study Cards Lab v5 (cards-lab-v5, tablet and desktop) and\n * Case Study Cards Mobile v5 (cards-lab-v5-mobile, phones), as a code override on a native card.\n *\n * Put withFoilCard on the card's root frame. The card stays a normal canvas component; this styles its named\n * layers (Glow, Glow 2, Top, Logo, Wordmark, Arrow with the Go and Expand icons, Result, Stat, Stat label, Soon,\n * Holo, Glare, Edge) and adds the motion.\n *\n * Progressive enhancement. Everything the card looks like at rest is plain CSS, rendered with the card in the\n * page's own HTML (a