/* xp.css — explainer kit styles. Put class="xp" on a wrapper. Colours are tokens: a site overrides
   --xp-* on .xp (or :root) to make every figure speak its palette. Defaults: the unibo notes palette.
   Materials keep one meaning everywhere: subject = what to watch, mem = memory/bytes/cost,
   work = compute/useful output, steel = structure, gold = a reveal or reward. */
.xp{
  --xp-ui:'Inter','Helvetica Neue',system-ui,sans-serif; --xp-mono:'IBM Plex Mono',ui-monospace,monospace;
  --xp-page:#F3EFE3; --xp-card:#FAF7EF; --xp-rule:#6E7068; --xp-text:#171813; --xp-muted:#45463F; --xp-accent:#1546B8; --xp-accent-dark:#10368E;
  --xp-hi:#171813; --xp-mid:#4A4B44; --xp-lo:#7C7D74; --xp-faint:#BDB7A9; --xp-glow:#1546B8;
  --xp-paper-top:#F7F3EA; --xp-paper-s0:#D8D1C1; --xp-paper-s1:#E1DBCD; --xp-paper-s2:#E9E4D7; --xp-paper-s3:#F0ECE2; --xp-paper-line:#4A4B44;
  --xp-steel-top:#F0F2F5; --xp-steel-s0:#C2C8D3; --xp-steel-s1:#CED4DE; --xp-steel-s2:#DADFE7; --xp-steel-s3:#E5E8EE; --xp-steel-line:#3F4656;
  --xp-subject-top:#6D8DDA; --xp-subject-s0:#10368E; --xp-subject-s1:#1546B8; --xp-subject-s2:#2552C0; --xp-subject-s3:#3A64C8; --xp-subject-line:#0B2A70;
  --xp-mem-top:#F7E7E1; --xp-mem-s0:#DDB2A6; --xp-mem-s1:#E6C3B9; --xp-mem-s2:#EED3CB; --xp-mem-s3:#F3DFD8; --xp-mem-line:#8A3226;
  --xp-memx-top:#E3978A; --xp-memx-s0:#8E2E21; --xp-memx-s1:#B83D2D; --xp-memx-s2:#C55141; --xp-memx-s3:#D06656; --xp-memx-line:#6A2118;
  --xp-work-top:#E6EFE9; --xp-work-s0:#A8C3B6; --xp-work-s1:#BAD0C4; --xp-work-s2:#CBDCD2; --xp-work-s3:#D9E6DE; --xp-work-line:#1F5A49;
  --xp-workx-top:#78AE9B; --xp-workx-s0:#143F33; --xp-workx-s1:#1F5A49; --xp-workx-s2:#2A6B58; --xp-workx-s3:#3B7D69; --xp-workx-line:#0E3128;
  --xp-ink-top:#4A4B44; --xp-ink-s0:#171813; --xp-ink-s1:#25261F; --xp-ink-s2:#30312A; --xp-ink-s3:#3B3C35; --xp-ink-line:#0B0C08;
  --xp-gold-top:#F1D58A; --xp-gold-s0:#8F6A1C; --xp-gold-s1:#B48526; --xp-gold-s2:#C9962B; --xp-gold-s3:#D8AA48; --xp-gold-line:#5E4510;
  margin:1.8rem 0; color:var(--xp-text);
}
/* the card: Fig at top left, title top right, hint bottom left, live readout bottom right */
.xp-card{position:relative;border:1px solid var(--xp-rule);border-radius:4px;background:var(--xp-card);padding:2.1rem .4rem 2.3rem;overflow:hidden}
.xp-fig,.xp-title,.xp-hint,.xp-readout{position:absolute;font-family:var(--xp-ui);font-size:.72rem;letter-spacing:.04em;color:var(--xp-muted);line-height:1.3;z-index:2}
.xp-fig{top:.7rem;left:.9rem;font-weight:700;color:var(--xp-hi)}
.xp-title{top:.7rem;right:.9rem;text-align:right;font-weight:600}
.xp-hint{bottom:.7rem;left:.9rem;font-style:italic;max-width:46%}
.xp-readout{bottom:.7rem;right:.9rem;text-align:right;font-family:var(--xp-mono);font-size:.74rem;font-weight:600;color:var(--xp-accent-dark);font-variant-numeric:tabular-nums;max-width:58%}
.xp-stage{position:relative;outline:none;touch-action:pan-y}
.xp-stage:focus-visible{outline:1px solid var(--xp-lo);outline-offset:6px}
.xp-stage > svg,.xp-stage > canvas{display:block;width:100%;height:auto}
.xp-stage > canvas{position:absolute;inset:0;height:100%}
.xp-stage[data-renderer="gl"] > svg{visibility:hidden}
.xp-stage[data-renderer="svg"] > canvas{display:none}
.xp-stage > canvas.xp-flat{display:none} .xp-stage[data-renderer="flat"] > canvas.xp-flat{display:block}   /* the 2D-canvas fallback (xp-canvas.js) */
.xp-stage[data-renderer="flat"] > canvas:not(.xp-flat){display:none} .xp-stage[data-renderer="flat"] > svg{visibility:hidden}
.xp-stage > svg.xp-shot{position:absolute;inset:0;height:100%}
.xp-snap{position:absolute;inset:0;pointer-events:none;overflow:hidden;display:none}
.xp-snap > canvas,.xp-snap > svg{position:absolute;inset:0;width:100%;height:100%;display:block}
/* solids */
.xp-svg{overflow:hidden}
.xp-svg path{vector-effect:non-scaling-stroke}
.xp-svg .f{stroke-width:.35;stroke-linejoin:round}
.xp-svg .ol,.xp-svg .cr,.xp-svg .ln{fill:none;stroke-linejoin:round;stroke-linecap:round}
.xp-svg .ol{stroke-width:.7} .xp-svg .cr{stroke-width:.45;stroke:var(--xp-faint)} .xp-svg .ln{stroke-width:.5}
.xp-svg .hi{stroke:var(--xp-hi)} .xp-svg .mid{stroke:var(--xp-mid)} .xp-svg .lo{stroke:var(--xp-lo)} .xp-svg .faint{stroke:var(--xp-faint)}
.xp-svg .m-mem,.xp-svg .m-memx{--xp-glow:#B83D2D}
.xp-svg .m-work,.xp-svg .m-workx{--xp-glow:#1F5A49}
.xp-svg .m-gold{--xp-glow:#B8862D}
.xp-svg .glow{filter:drop-shadow(0 0 calc(var(--glow) * 5px) var(--xp-glow))}
.xp-svg .glow .ol{stroke:var(--xp-glow);stroke-width:1.2}
/* materials (generated pattern: tp + s0..s3 fills, outline and crease colour) */
.xp-svg .m-paper .f.tp{fill:var(--xp-paper-top);stroke:var(--xp-paper-top)} .xp-svg .m-paper .f.s0{fill:var(--xp-paper-s0);stroke:var(--xp-paper-s0)} .xp-svg .m-paper .f.s1{fill:var(--xp-paper-s1);stroke:var(--xp-paper-s1)} .xp-svg .m-paper .f.s2{fill:var(--xp-paper-s2);stroke:var(--xp-paper-s2)} .xp-svg .m-paper .f.s3{fill:var(--xp-paper-s3);stroke:var(--xp-paper-s3)}
.xp-svg .m-steel .f.tp{fill:var(--xp-steel-top);stroke:var(--xp-steel-top)} .xp-svg .m-steel .f.s0{fill:var(--xp-steel-s0);stroke:var(--xp-steel-s0)} .xp-svg .m-steel .f.s1{fill:var(--xp-steel-s1);stroke:var(--xp-steel-s1)} .xp-svg .m-steel .f.s2{fill:var(--xp-steel-s2);stroke:var(--xp-steel-s2)} .xp-svg .m-steel .f.s3{fill:var(--xp-steel-s3);stroke:var(--xp-steel-s3)} .xp-svg .m-steel .ol{stroke:var(--xp-steel-line)}
.xp-svg .m-subject .f.tp{fill:var(--xp-subject-top);stroke:var(--xp-subject-top)} .xp-svg .m-subject .f.s0{fill:var(--xp-subject-s0);stroke:var(--xp-subject-s0)} .xp-svg .m-subject .f.s1{fill:var(--xp-subject-s1);stroke:var(--xp-subject-s1)} .xp-svg .m-subject .f.s2{fill:var(--xp-subject-s2);stroke:var(--xp-subject-s2)} .xp-svg .m-subject .f.s3{fill:var(--xp-subject-s3);stroke:var(--xp-subject-s3)} .xp-svg .m-subject .ol,.xp-svg .m-subject .cr{stroke:var(--xp-subject-line)}
.xp-svg .m-mem .f.tp{fill:var(--xp-mem-top);stroke:var(--xp-mem-top)} .xp-svg .m-mem .f.s0{fill:var(--xp-mem-s0);stroke:var(--xp-mem-s0)} .xp-svg .m-mem .f.s1{fill:var(--xp-mem-s1);stroke:var(--xp-mem-s1)} .xp-svg .m-mem .f.s2{fill:var(--xp-mem-s2);stroke:var(--xp-mem-s2)} .xp-svg .m-mem .f.s3{fill:var(--xp-mem-s3);stroke:var(--xp-mem-s3)} .xp-svg .m-mem .ol,.xp-svg .m-mem .cr{stroke:var(--xp-mem-line)}
.xp-svg .m-memx .f.tp{fill:var(--xp-memx-top);stroke:var(--xp-memx-top)} .xp-svg .m-memx .f.s0{fill:var(--xp-memx-s0);stroke:var(--xp-memx-s0)} .xp-svg .m-memx .f.s1{fill:var(--xp-memx-s1);stroke:var(--xp-memx-s1)} .xp-svg .m-memx .f.s2{fill:var(--xp-memx-s2);stroke:var(--xp-memx-s2)} .xp-svg .m-memx .f.s3{fill:var(--xp-memx-s3);stroke:var(--xp-memx-s3)} .xp-svg .m-memx .ol,.xp-svg .m-memx .cr{stroke:var(--xp-memx-line)}
.xp-svg .m-work .f.tp{fill:var(--xp-work-top);stroke:var(--xp-work-top)} .xp-svg .m-work .f.s0{fill:var(--xp-work-s0);stroke:var(--xp-work-s0)} .xp-svg .m-work .f.s1{fill:var(--xp-work-s1);stroke:var(--xp-work-s1)} .xp-svg .m-work .f.s2{fill:var(--xp-work-s2);stroke:var(--xp-work-s2)} .xp-svg .m-work .f.s3{fill:var(--xp-work-s3);stroke:var(--xp-work-s3)} .xp-svg .m-work .ol,.xp-svg .m-work .cr{stroke:var(--xp-work-line)}
.xp-svg .m-workx .f.tp{fill:var(--xp-workx-top);stroke:var(--xp-workx-top)} .xp-svg .m-workx .f.s0{fill:var(--xp-workx-s0);stroke:var(--xp-workx-s0)} .xp-svg .m-workx .f.s1{fill:var(--xp-workx-s1);stroke:var(--xp-workx-s1)} .xp-svg .m-workx .f.s2{fill:var(--xp-workx-s2);stroke:var(--xp-workx-s2)} .xp-svg .m-workx .f.s3{fill:var(--xp-workx-s3);stroke:var(--xp-workx-s3)} .xp-svg .m-workx .ol,.xp-svg .m-workx .cr{stroke:var(--xp-workx-line)}
.xp-svg .m-ink .f.tp{fill:var(--xp-ink-top);stroke:var(--xp-ink-top)} .xp-svg .m-ink .f.s0{fill:var(--xp-ink-s0);stroke:var(--xp-ink-s0)} .xp-svg .m-ink .f.s1{fill:var(--xp-ink-s1);stroke:var(--xp-ink-s1)} .xp-svg .m-ink .f.s2{fill:var(--xp-ink-s2);stroke:var(--xp-ink-s2)} .xp-svg .m-ink .f.s3{fill:var(--xp-ink-s3);stroke:var(--xp-ink-s3)} .xp-svg .m-ink .ol{stroke:var(--xp-ink-line)}
.xp-svg .m-gold .f.tp{fill:var(--xp-gold-top);stroke:var(--xp-gold-top)} .xp-svg .m-gold .f.s0{fill:var(--xp-gold-s0);stroke:var(--xp-gold-s0)} .xp-svg .m-gold .f.s1{fill:var(--xp-gold-s1);stroke:var(--xp-gold-s1)} .xp-svg .m-gold .f.s2{fill:var(--xp-gold-s2);stroke:var(--xp-gold-s2)} .xp-svg .m-gold .f.s3{fill:var(--xp-gold-s3);stroke:var(--xp-gold-s3)} .xp-svg .m-gold .ol,.xp-svg .m-gold .cr{stroke:var(--xp-gold-line)}
.xp-keys{display:flex;flex-wrap:wrap;gap:.3rem 1.1rem;margin:.55rem .2rem 0;font-family:var(--xp-ui);font-size:.75rem;color:var(--xp-muted)}
.xp-keys i{display:inline-block;width:.75rem;height:.75rem;margin-right:.35rem;vertical-align:-1px;border:1px solid var(--xp-mid);border-radius:2px;background:var(--xp-paper-s2)}
.xp-keys i.k-subject{background:var(--xp-subject-s1);border-color:var(--xp-subject-line)} .xp-keys i.k-mem{background:var(--xp-memx-s1);border-color:var(--xp-memx-line)}
.xp-keys i.k-mempale{background:var(--xp-mem-s2);border-color:var(--xp-mem-line)} .xp-keys i.k-work{background:var(--xp-workx-s1);border-color:var(--xp-workx-line)}
.xp-keys i.k-workpale{background:var(--xp-work-s2);border-color:var(--xp-work-line)} .xp-keys i.k-steel{background:var(--xp-steel-s1);border-color:var(--xp-steel-line)}
.xp-keys i.k-gold{background:var(--xp-gold-s2);border-color:var(--xp-gold-line)}
.xp-cap{margin:.6rem .2rem 0;font-size:.92rem;color:var(--xp-muted)}
.xp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:560px){
  .xp-card{padding:2.3rem 0 .6rem}
  .xp-hint,.xp-readout{position:static;display:block;max-width:none;margin:.3rem .7rem 0;text-align:left}
}
/* labels pinned to the scene (player option `labels`) */
.xp-labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.xp-label{position:absolute;left:0;top:0;white-space:nowrap;font-family:var(--xp-mono,'IBM Plex Mono',monospace);font-size:11px;line-height:1.2;color:#171813;background:rgba(250,247,239,.82);padding:1px 4px;border-radius:2px}
.xp-label.word{font-family:var(--xp-ui,'Inter',sans-serif);font-weight:600;font-size:12px}
.xp-label.me{color:#fff;background:#1546B8}
.xp-label.hot{color:#fff;background:#B83D2D}
.xp-label.ok{color:#fff;background:#1F5A49}
.xp-label{transform-origin:0 0}
.xp-label.flat{background:none;text-shadow:none}
.xp-label.dim{color:#7C7D74;background:rgba(250,247,239,.6)}
.xp-label.tag{font-family:var(--xp-ui,'Inter',sans-serif);font-size:10.5px;letter-spacing:.03em;text-transform:uppercase;color:#45463F;background:none;text-shadow:0 0 2px rgba(250,247,239,.95),0 0 3px rgba(250,247,239,.95),0 0 6px rgba(250,247,239,.8)}   /* a paper halo: readable over dense parts */
.xp-keys i.k-paper{background:var(--xp-paper-s1);border-color:var(--xp-paper-line)}
@media (max-width:560px){.xp-label{font-size:10px;padding:0 3px}.xp-label.word{font-size:10.5px}}
.xp-keys i.k-ink{background:var(--xp-ink-s1);border-color:var(--xp-ink-line)}

/* the film player: everything you operate lives inside the frame, as on a video */
.xp-film{padding-bottom:.4rem}
.xp-film .xp-stage{cursor:pointer}
.xp-film.idle .xp-stage{cursor:none}
.xp-film.calm .xp-stage{cursor:default}
.xp-over{position:absolute;inset:0;z-index:3;pointer-events:none;font-family:var(--xp-ui);transition:background-color .3s}
.xp-film.poster .xp-over{background:color-mix(in srgb,var(--xp-card) 38%,transparent)}
.xp-live{position:absolute;top:.1rem;right:.5rem;max-width:56%;padding:.16rem .45rem;border-radius:3px;text-align:right;font-family:var(--xp-mono);font-size:.72rem;font-weight:600;line-height:1.35;color:var(--xp-accent-dark);font-variant-numeric:tabular-nums;background:color-mix(in srgb,var(--xp-card) 84%,transparent);opacity:0;transition:opacity .25s}
.xp-live.on{opacity:1}
.xp-film.poster .xp-live{opacity:0}
/* the act's lower-third, for the first seconds of each act */
.xp-act{position:absolute;top:.1rem;left:.6rem;display:flex;flex-direction:column;gap:.05rem;padding:.3rem .75rem .35rem .6rem;border-left:3px solid var(--xp-accent);background:color-mix(in srgb,var(--xp-card) 90%,transparent);opacity:0;transform:translateX(-.5rem);transition:opacity .4s,transform .4s}
.xp-act.on{opacity:1;transform:none}
.xp-act small{font-size:.6rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--xp-muted)}
.xp-act span{font-size:.95rem;font-weight:700;color:var(--xp-hi)}
/* subtitles: the spoken line on a dark band, each word lit as it is said */
.xp-sub{position:absolute;z-index:3;left:0;right:0;bottom:3.6rem;padding:0 7%;pointer-events:none;text-align:center;line-height:1.72;opacity:0;transition:bottom .3s ease,opacity .25s}
.xp-sub.on{opacity:1}
.xp-film.idle .xp-sub,.xp-film.export .xp-sub{bottom:1.1rem}
.xp-film.nocc .xp-sub,.xp-film.poster .xp-sub{display:none}
.xp-sub-l{display:inline;padding:.14em .45em;border-radius:3px;-webkit-box-decoration-break:clone;box-decoration-break:clone;background:rgba(23,24,19,.8);color:#FAF7EF;font-family:inherit;font-size:clamp(.8rem,.5rem + .55vw,.96rem)}
.xp-sub-l .xp-w{border-radius:2px;transition:color .08s,background-color .08s}
.xp-sub-l .xp-w:not(.past):not(.on){color:rgba(250,247,239,.52)}
.xp-sub-l .xp-w.on{background:var(--xp-accent);color:#fff;box-shadow:0 0 0 2px var(--xp-accent)}
/* the poster's play button, and the flash when the picture is clicked */
.xp-big{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:none;align-items:center;gap:.65rem;padding:.55rem 1.2rem .55rem .6rem;border:0;border-radius:999px;background:var(--xp-accent);color:#fff;font:500 .92rem var(--xp-ui);white-space:nowrap;cursor:pointer;pointer-events:auto;box-shadow:0 8px 28px color-mix(in srgb,var(--xp-accent-dark) 35%,transparent);transition:background-color .15s,transform .15s}
.xp-big:hover{background:var(--xp-accent-dark);transform:translate(-50%,-50%) scale(1.03)}
.xp-big:focus-visible{outline:2px solid var(--xp-accent);outline-offset:3px}
.xp-big svg{width:34px;height:34px;padding:7px 6px 7px 8px;border-radius:50%;fill:currentColor;background:rgba(255,255,255,.2)}
.xp-big i{font-style:normal;font-family:var(--xp-mono);font-size:.82rem;opacity:.85}
.xp-film.poster .xp-big{display:inline-flex}
.xp-flash{position:absolute;left:50%;top:50%;width:62px;height:62px;margin:-31px 0 0 -31px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(23,24,19,.55);color:#fff;opacity:0}
.xp-flash svg{width:28px;height:28px;fill:currentColor}
.xp-flash.go{animation:xp-flash .65s ease-out}
@keyframes xp-flash{0%{opacity:.9;transform:scale(.8)}100%{opacity:0;transform:scale(1.4)}}
/* the bar: frosted, inside the frame, gone while the film plays untouched */
.xp-bar{position:absolute;left:.5rem;right:.5rem;bottom:.5rem;z-index:4;display:flex;align-items:center;gap:.15rem;padding:.15rem .35rem;border-radius:7px;border:1px solid color-mix(in srgb,var(--xp-rule) 28%,transparent);background:color-mix(in srgb,var(--xp-card) 84%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 4px 18px rgba(23,24,19,.1);font-family:var(--xp-ui);color:var(--xp-hi);transition:opacity .35s,transform .35s}
.xp-film.idle .xp-bar{opacity:0;transform:translateY(.35rem);pointer-events:none}
.xp-film.poster .xp-bar{opacity:0;pointer-events:none}
.xp-film.poster:hover .xp-bar,.xp-film.poster:focus-within .xp-bar{opacity:1;pointer-events:auto}
.xp-bar button{flex:none;display:inline-flex;align-items:center;justify-content:center;width:2.1rem;height:2.1rem;padding:0;border:0;border-radius:4px;background:transparent;color:inherit;cursor:pointer}
.xp-bar button:hover{background:color-mix(in srgb,var(--xp-hi) 8%,transparent)}
.xp-bar button:disabled{opacity:.35;cursor:default}
.xp-bar button:focus-visible,.xp-scrub:focus-visible{outline:2px solid var(--xp-accent);outline-offset:1px}
.xp-bar svg{width:20px;height:20px;fill:currentColor}
.xp-bar .b-play svg{width:22px;height:22px}
.xp-bar svg .ln{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.xp-bar .b-cc[aria-pressed="false"]{opacity:.42}
.xp-bar .b-style.set{color:var(--xp-accent)}
.xp-bar .time{flex:none;padding:0 .3rem;font-family:var(--xp-mono);font-size:.72rem;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--xp-muted)}
.xp-bar .now{flex:0 1 auto;max-width:12rem;padding-right:.4rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;font-weight:600;color:var(--xp-muted)}
.xp-scrub{position:relative;-webkit-user-select:none;user-select:none;flex:1 1 auto;min-width:4rem;height:2.1rem;margin:0 .45rem;display:flex;align-items:center;cursor:pointer;touch-action:none;border-radius:3px}
.xp-scrub .segs{display:flex;gap:3px;width:100%;height:5px;transition:height .15s}
.xp-scrub:hover .segs,.xp-scrub:focus-visible .segs{height:8px}
.xp-scrub .segs i{flex:1 1 0;position:relative;overflow:hidden;border-radius:2px;background:color-mix(in srgb,var(--xp-hi) 15%,transparent)}
.xp-scrub .segs b{position:absolute;top:0;bottom:0;left:0;width:0;background:var(--xp-accent)}
.xp-scrub .thumb{position:absolute;top:50%;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:50%;background:var(--xp-accent);box-shadow:0 0 0 2px var(--xp-card);transition:transform .15s}
.xp-scrub:hover .thumb{transform:scale(1.2)}
.xp-scrub .tip{position:absolute;bottom:calc(100% + .15rem);left:0;transform:translateX(-50%);padding:.2rem .45rem;border-radius:3px;background:var(--xp-hi);color:var(--xp-card);font-size:.7rem;font-weight:600;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s}
.xp-scrub.hover .tip{opacity:1}
.xp-menu-w{position:relative;display:inline-flex}
.xp-menu{position:absolute;right:0;bottom:calc(100% + .45rem);min-width:10.5rem;padding:.3rem;display:flex;flex-direction:column;border-radius:7px;border:1px solid color-mix(in srgb,var(--xp-rule) 40%,transparent);background:var(--xp-card);box-shadow:0 10px 30px rgba(23,24,19,.18)}
.xp-menu[hidden]{display:none}
.xp-bar .xp-menu button{position:relative;width:auto;height:auto;justify-content:flex-start;padding:.36rem .7rem .36rem 1.65rem;font:500 .8rem var(--xp-ui);text-transform:capitalize}
.xp-menu button[aria-checked="true"]{color:var(--xp-accent);font-weight:700}
.xp-menu button[aria-checked="true"]::before{content:'\2713';position:absolute;left:.6rem}
/* full screen: the frame fills the screen, the picture keeps its shape */
.xp-film:fullscreen{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;border:0;border-radius:0}
.xp-film:fullscreen .xp-stage{width:min(100vw,calc(100vh * var(--xp-ar)))}
.xp-film:fullscreen .xp-sub-l{font-size:1.5rem}
.xp-film:fullscreen .xp-fig,.xp-film:fullscreen .xp-title{font-size:.9rem}
/* export (scripts/render.js, capture.js): the picture and its subtitles only */
.xp-film.export .xp-bar,.xp-film.export .xp-big,.xp-film.export .xp-flash{display:none}
@media (max-width:560px){
  .xp-film{padding-bottom:.25rem}
  .xp-bar{left:.25rem;right:.25rem;bottom:.25rem;gap:0;padding:.05rem .15rem}
  .xp-bar button{width:1.95rem;height:1.95rem}
  .xp-bar .now,.xp-menu-w{display:none}
  .xp-bar .time{padding:0 .15rem;font-size:.64rem}
  .xp-scrub{margin:0 .3rem}
  /* phones: the picture is too small to carry subtitles, so they get a strip of the frame under it */
  .xp-film{--xp-subh:4.1rem}
  .xp-film.nocc{--xp-subh:0rem}
  .xp-sub,.xp-film.idle .xp-sub,.xp-film.export .xp-sub{position:static;height:var(--xp-subh);margin:.15rem .55rem 0;padding:0;text-align:left;line-height:1.38;overflow:hidden;opacity:1}
  .xp-sub-l{padding:0;background:none;color:var(--xp-text);font-size:.8rem}
  .xp-sub-l .xp-w:not(.past):not(.on){color:#8A8B83}
  .xp-film.poster .xp-sub{display:block}.xp-film.poster .xp-sub-l{visibility:hidden}
  .xp-bar{bottom:calc(var(--xp-subh) + .45rem)}
  .xp-live{top:0;right:.3rem;max-width:64%;font-size:.6rem;padding:.1rem .3rem}
  .xp-act{top:0;left:.3rem;padding:.18rem .5rem .22rem .45rem}
  .xp-act span{font-size:.78rem}
  .xp-big{font-size:.82rem;padding:.45rem 1rem .45rem .5rem}
  .xp-big svg{width:28px;height:28px}
}
@media (prefers-reduced-motion:reduce){.xp-flash.go{animation:none}.xp-act,.xp-bar,.xp-sub{transition:none}}

/* ?perf: which GPU, how many pixels, how long a frame takes */
.xp-perf{position:absolute;left:.5rem;bottom:3.4rem;z-index:6;max-width:calc(100% - 1rem);font:11px/1.35 ui-monospace,Menlo,Consolas,monospace;color:#fff;background:rgba(20,20,18,.72);padding:.25rem .45rem;border-radius:3px;pointer-events:none}

/* predictions (tl.ask): a panel over the picture; marks on the scrubber */
.xp-ask{position:absolute;inset:.6rem .6rem 1.1rem;z-index:5;display:flex;align-items:center;justify-content:center;pointer-events:none;font-family:var(--xp-ui)}
.xp-ask[hidden]{display:none}
.xp-ask-in{pointer-events:auto;max-width:34rem;max-height:100%;overflow:auto;padding:.85rem 1rem .9rem;border-radius:8px;border:1px solid color-mix(in srgb,var(--xp-rule) 35%,transparent);background:color-mix(in srgb,var(--xp-card) 95%,transparent);box-shadow:0 10px 32px rgba(23,24,19,.16)}
.xp-ask .q{margin:0 0 .6rem;font-size:.95rem;font-weight:600;line-height:1.35;color:var(--xp-hi)}
.xp-ask .q small{display:block;margin-bottom:.2rem;font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--xp-accent)}
.xp-ask .opts,.xp-ask .conf,.xp-ask .go{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem}
.xp-ask .conf{margin-top:.55rem}
.xp-ask .conf span{margin-right:.15rem;font-size:.75rem;color:var(--xp-muted)}
.xp-ask button{font:500 .82rem/1.25 var(--xp-ui);padding:.36rem .72rem;border:1px solid color-mix(in srgb,var(--xp-rule) 45%,transparent);border-radius:5px;background:var(--xp-card);color:var(--xp-hi);cursor:pointer}
.xp-ask button:hover:not(:disabled){border-color:var(--xp-accent)}
.xp-ask button:focus-visible{outline:2px solid var(--xp-accent);outline-offset:1px}
.xp-ask button[aria-pressed="true"]{background:var(--xp-accent);border-color:var(--xp-accent);color:#fff}
.xp-ask button:disabled{cursor:default}
.xp-ask button:disabled:not([aria-pressed="true"]){opacity:.5}
.xp-ask .go{margin-top:.75rem}
.xp-ask .go .lock{background:var(--xp-accent);border-color:var(--xp-accent);color:#fff;font-weight:600}
.xp-ask .go .lock:disabled{opacity:.4}
.xp-ask .go .skip{border:0;background:none;color:var(--xp-muted);text-decoration:underline;text-underline-offset:2px}
.xp-ask .go span{font-size:.75rem;font-style:italic;color:var(--xp-muted)}
.xp-scrub .thumb{z-index:2}
.xp-scrub .ask-mark{position:absolute;top:50%;z-index:1;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;transform:rotate(45deg);border-radius:1px;background:var(--xp-gold-s2);box-shadow:0 0 0 1.5px var(--xp-card);pointer-events:none}
.xp-scrub .ask-mark.done{background:var(--xp-lo)}
/* free play (o.free): controls under the picture, and the button that opens them */
.xp-bar .b-free{width:auto;height:1.75rem;margin:0 .2rem;padding:0 .7rem;border:1px solid color-mix(in srgb,var(--xp-accent) 50%,transparent);border-radius:999px;font:600 .74rem var(--xp-ui);color:var(--xp-accent);white-space:nowrap}
.xp-bar .b-free[aria-pressed="true"]{background:var(--xp-accent);color:#fff}
.xp-free{margin:.55rem .5rem 3.3rem;font-family:var(--xp-ui)}   /* clears the bar, which floats over the frame's bottom */
.xp-free[hidden]{display:none}
.xp-free fieldset{margin:0;padding:0;border:0;min-width:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:.5rem 1.4rem}
.xp-free fieldset:disabled{opacity:.42}
.xp-free-h{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.45rem}
.xp-free-h span{font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--xp-accent)}
.xp-free label{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.6rem;font-size:.8rem;color:var(--xp-text)}
.xp-free .n{font-weight:600;color:var(--xp-muted)}
.xp-free input[type=range]{width:100%;min-width:0;margin:0;accent-color:var(--xp-accent)}
.xp-free select{font:inherit;padding:.22rem .4rem;border:1px solid color-mix(in srgb,var(--xp-rule) 45%,transparent);border-radius:4px;background:var(--xp-card);color:inherit}
.xp-free output{min-width:4.5ch;text-align:right;font-family:var(--xp-mono);font-size:.76rem;font-variant-numeric:tabular-nums;color:var(--xp-accent-dark)}
.xp-free .back{padding:.26rem .7rem;border:1px solid color-mix(in srgb,var(--xp-rule) 45%,transparent);border-radius:5px;background:var(--xp-card);color:var(--xp-hi);font:500 .78rem var(--xp-ui);cursor:pointer}
.xp-free .back:focus-visible,.xp-free input:focus-visible,.xp-free select:focus-visible{outline:2px solid var(--xp-accent);outline-offset:1px}
@media (max-width:560px){
  .xp-ask{inset:.3rem .3rem 2.5rem}
  .xp-film.asking .xp-ask{bottom:.3rem}
  .xp-film.asking .xp-bar{display:none}
  .xp-ask-in{padding:.5rem .6rem .55rem}
  .xp-ask .q{margin-bottom:.4rem;font-size:.82rem}
  .xp-ask button{font-size:.74rem;padding:.26rem .5rem}
  .xp-ask .conf{margin-top:.4rem}.xp-ask .go{margin-top:.5rem}
  .xp-bar .b-free{height:1.6rem;margin:0 .1rem;padding:0 .45rem;font-size:.66rem}
  .xp-film.free{--xp-subh:0rem}
  .xp-bar:has(.b-free) .time{display:none}
  .xp-free{margin:.45rem .45rem 2.9rem}
}

/* xp-plot.js: 2-D charts, drawn at the container's width (text 11 px or more) */
.xp.xp-plot,.xp-plot{margin:.7rem 0;font-family:var(--xp-ui)}
.xp-plot svg{display:block;max-width:100%;height:auto;overflow:visible}
.xp-plot .g{stroke:var(--xp-faint);stroke-width:1;opacity:.6}
.xp-plot .ax,.xp-plot .tk{stroke:var(--xp-mid);stroke-width:1}
.xp-plot .tl{fill:var(--xp-muted);font-family:var(--xp-mono);font-variant-numeric:tabular-nums}
.xp-plot .al{fill:var(--xp-text);font-family:var(--xp-ui);font-weight:600}
.xp-plot .ln{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.xp-plot .ref{fill:none;stroke-width:1.2;opacity:.8}
.xp-plot .bar{stroke-width:1}
.xp-plot .pt{stroke:var(--xp-card);stroke-width:1} .xp-plot .pt-r{fill:none;stroke-width:2}
.xp-plot .note{font-family:var(--xp-ui);font-weight:600;paint-order:stroke;stroke:var(--xp-card);stroke-width:3px;stroke-linejoin:round}
.xp-plot-keys{display:flex;flex-wrap:wrap;gap:.3rem 1.1rem;margin:.35rem .1rem 0;font-size:.75rem;color:var(--xp-muted)}
.xp-plot-keys[hidden]{display:none}
.xp-plot-keys span{display:inline-flex;align-items:center;gap:.35rem}