.lp .xp-demo{display:grid;gap:10px;min-width:0}.lp .xp-demo .xp-pause{position:relative;justify-self:end;display:inline-flex;align-items:center;border-radius:8px;color:var(--ink-3);font-size:13px;font-weight:600;cursor:pointer}.lp .xp-demo .xp-pause input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}.lp .xp-demo .xp-pause>span{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:8px}.lp .xp-demo .xp-pause svg{width:13px;height:13px;fill:currentColor}.lp .xp-demo .xp-pause:hover>span{color:var(--ink)}.lp .xp-demo .xp-pause:has(input:focus-visible)>span{outline:2px solid var(--green);outline-offset:2px}.lp .xp-demo .xp-pause-paused,.lp .xp-demo .xp-pause:has(input:checked) .xp-pause-playing{display:none!important}.lp .xp-demo .xp-pause:has(input:checked) .xp-pause-paused{display:inline-flex!important}.lp .xp-demo:has(.xp-pause input:checked) .xd-scene,.lp .xp-demo:has(.xp-pause input:checked) .xd-scene *{animation-play-state:paused!important}.lp .xp-demo .xd-stage{container-type:inline-size}.lp .xp-demo .xd-scene{--xd-u:calc(100cqi / 64);position:relative;overflow:hidden;color:#fff;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Arial,sans-serif;font-size:var(--xd-u);font-weight:400;line-height:1.4;text-align:left;-webkit-font-smoothing:antialiased}.lp .xp-demo :where(.xd-scene) :where(span,b,i,u,em,kbd){font-style:normal}.lp .xp-demo :where(.xd-scene span){display:block}.lp .xp-demo :where(.xd-scene) .xd-icon{display:block;flex-shrink:0;width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.lp .xp-demo :where(.xd-scene) .xd-icon.xd-fill{fill:currentColor;stroke:none}.lp .xp-demo .xd-cursor{position:absolute;z-index:6;width:1.25em;height:1.667em;margin:-.104em 0 0 -.139em;font-size:var(--xd-u);filter:drop-shadow(0 .08em .14em rgb(0 0 0/.55));pointer-events:none}.lp .xp-demo .xd-cursor svg{display:block;width:100%;height:100%;overflow:visible}.lp .xp-demo .xd-cursor path{fill:#fff;stroke:#16181a;stroke-width:1.3;stroke-linejoin:round}.lp .xp-demo .xd-click{position:absolute;left:.139em;top:.104em;width:2.4em;height:2.4em;margin:-1.2em 0 0 -1.2em;border:.14em solid rgb(255 255 255/.95);border-radius:50%;box-shadow:0 0 .5em rgb(0 0 0/.35);opacity:0}.lp .xp-demo .xd-player{aspect-ratio:16/9;background:#101312}.lp .xp-demo .xd-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.8)}.lp .xp-demo .xd-subs{position:absolute;left:50%;bottom:3.9em;z-index:2;display:flex;flex-direction:column;align-items:center;gap:.45em;width:94%;transform:translateX(-50%);text-align:center}.lp .xp-demo .xd-line{display:inline-block;max-width:100%;padding:.42em 1em;border-radius:.62em;background:#0e161de8;box-shadow:0 .2em 1em rgb(0 0 0/.27);color:#fff;font-size:1.42em;font-weight:600;line-height:1.45;white-space:nowrap}.lp .xp-demo .xd-line.xd-masked,.lp .xp-demo .xd-line.xd-target{padding:.36em .95em;color:#c4ead7;font-size:1.08em;font-weight:400}.lp .xp-demo .xd-word{position:relative;display:inline-block}.lp .xp-demo .xd-word-text{display:inline;padding:0 .06em;border-radius:.16em}.lp .xp-demo :is(.xd-bubble,.xd-abubble){position:absolute;z-index:3;display:flex;flex-direction:column;padding:.75em 1em;border-radius:.6em;background:#203b32;box-shadow:0 0 0 1px #ffffff1f,0 .3em 1.1em rgb(0 0 0/.4);color:#e1eee7;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Arial,sans-serif;font-size:var(--xd-u);font-weight:400;line-height:1.45;text-align:left;white-space:nowrap}.lp .xp-demo .xd-bubble{left:50%;bottom:calc(100% + .75em);width:17em;transform:translateX(-50%)}.lp .xp-demo .xd-bubble-head{margin-bottom:.3em;color:#a7c3b5;font-size:.72em;line-height:1.4}.lp .xp-demo .xd-sense{display:flex;align-items:baseline;gap:.55em;padding-top:.2em;color:#c3d6cc;font-size:.92em}.lp .xp-demo .xd-sense-main{margin:0 -.4em;padding:.05em .4em;border-radius:.3em;color:#fff;font-size:1.12em;font-weight:600}.lp .xp-demo .xd-part{margin-left:auto;color:#a7c3b5;font-size:calc(var(--xd-u) * .66);font-weight:400}.lp .xp-demo .xd-part+.xd-part{margin-left:0}.lp .xp-demo .xd-card-link{display:grid;place-items:center;align-self:center;width:1.3em;height:1.3em;border-radius:.3em;color:#9edcc1;font-size:var(--xd-u)}.lp .xp-demo .xd-card-link .xd-icon{width:.95em;height:.95em}.lp .xp-demo .xd-hint{display:flex;align-items:center;gap:.45em;margin-top:.45em;padding-top:.45em;overflow:hidden;border-top:1px solid #ffffff1f;color:#a7c3b5;font-size:.7em}.lp .xp-demo .xd-hint .xd-icon{color:#9edcc1}.lp .xp-demo .xd-hint>span{overflow:hidden;text-overflow:ellipsis}.lp .xp-demo .xd-tip{bottom:calc(100% + .42em);width:.7em;height:.7em;background:#203b32;transform:translateX(-50%) rotate(45deg)}.lp .xp-demo .xd-card,.lp .xp-demo .xd-tip{position:absolute;left:50%;z-index:3;font-size:var(--xd-u)}.lp .xp-demo .xd-card{bottom:calc(100% + .75em);display:flex;flex-direction:column;align-items:center;width:19em;padding:.6em 1em 1em;border:1px solid #95d8c333;border-radius:.7em;background:radial-gradient(ellipse at top,#95d8c314,transparent 60%),#1f232b;box-shadow:0 0 0 1px #95d8c312,0 .8em 2em -1em #95d8c340,0 .3em 1.1em rgb(0 0 0/.45);color:#f3f5f8;font-weight:400;line-height:1.4;text-align:center;white-space:nowrap;opacity:0;transform:translateX(-50%)}.lp .xp-demo .xd-card-top{position:relative;display:flex;align-self:stretch;align-items:center;justify-content:space-between;height:2em;margin:0 -.4em}.lp .xp-demo .xd-card-back{display:grid;place-items:center;width:2em;height:2em;color:#c9d1dc}.lp .xp-demo .xd-card-back .xd-icon{width:1.2em;height:1.2em}.lp .xp-demo .xd-card-add{position:relative;width:2em;height:2em}.lp .xp-demo .xd-add-plus{position:absolute;inset:0;display:grid;place-items:center;border-radius:999px;background:#ffffff08;box-shadow:inset 0 0 0 1px #ffffff26;color:#c9d1dc;font-size:1.35em;line-height:1}.lp .xp-demo .xd-add-saved{position:absolute;top:0;right:0;display:inline-flex;align-items:center;gap:.4em;height:calc(var(--xd-u) * 2);padding:0 .9em;border-radius:999px;background:#10b98126;box-shadow:inset 0 0 0 1px #10b98159;color:#34d399;font-size:.74em;font-weight:700;white-space:nowrap;opacity:0}.lp .xp-demo .xd-add-saved .xd-icon{stroke-width:2.6}.lp .xp-demo .xd-card-front{position:relative;margin-top:.1em;color:#fff;font-size:1.5em;font-weight:700;letter-spacing:-.02em;line-height:1.25}.lp .xp-demo .xd-card-front .xd-audio{position:absolute;top:50%;left:100%;margin-left:.3em;font-size:calc(var(--xd-u) * 1.05);transform:translateY(-50%)}.lp .xp-demo .xd-audio{color:#9aa3b2}.lp .xp-demo .xd-card-translation{margin-top:.2em;color:#b9ecd9;font-size:1.15em;font-weight:700;line-height:1.3}.lp .xp-demo .xd-card-example{display:flex;flex-direction:column;align-items:center;align-self:stretch;margin-top:.75em;padding-top:.65em;border-top:1px solid #ffffff12}.lp .xp-demo .xd-quote{display:inline-flex;align-items:center;gap:.35em;color:#d3d8e0;font-size:.86em;line-height:1.5}.lp .xp-demo .xd-quote-translation{margin-top:.25em;color:#9aa3b2;font-size:.78em;font-style:italic!important}.lp .xp-demo .xd-bezel{position:absolute;left:50%;top:40%;z-index:2;display:grid;place-items:center;width:4.4em;height:4.4em;margin:-2.2em 0 0 -2.2em;border-radius:50%;background:rgb(0 0 0/.55);color:#fff;opacity:0}.lp .xp-demo .xd-bezel .xd-icon{width:2em;height:2em}.lp .xp-demo .xd-controls{position:absolute;left:0;right:0;bottom:0;z-index:1;display:flex;align-items:center;gap:.95em;height:3.2em;padding:.6em 1.1em 0;background:linear-gradient(transparent,rgb(0 0 0/.62));color:#fff}.lp .xp-demo .xd-controls .xd-icon{width:1.3em;height:1.3em}.lp .xp-demo .xd-progress{position:absolute;left:1.1em;right:1.1em;top:.3em;height:.22em;background:rgb(255 255 255/.3)}.lp .xp-demo .xd-progress i{display:block;width:100%;height:100%;background:#f00;transform:scaleX(.34);transform-origin:left}.lp .xp-demo .xd-playstate{display:grid}.lp .xp-demo .xd-playstate>span{grid-area:1/1}.lp .xp-demo .xd-state-playing{opacity:0}.lp .xp-demo .xd-time{color:#eee;font-size:.82em;font-variant-numeric:tabular-nums}.lp .xp-demo .xd-controls-end{display:flex;align-items:center;gap:1em;margin-left:auto}.lp .xp-demo .xd-ext-toggle{display:grid;place-items:center;height:1.6em;padding-bottom:.15em;border-bottom:.16em solid #6fc7a8}.lp .xp-demo .xd-ext-toggle img{display:block;width:auto;height:1.15em}.lp .xp-demo .xd-hero{margin:0}.lp .xp-demo .xd-hero .xd-scene{--xd-u:calc(100cqi / 48);--xd-loop:13s}.lp .xp-demo .xd-hero .xd-word-text{background:#427860;color:#fff}.lp .xp-demo .xd-hero .xd-cursor{left:50%;top:50%;transform:translate(.2em,.5em)}@container (max-width: 440px){.lp .xp-demo .xd-hero .xd-scene{--xd-u:calc(100cqi / 40);aspect-ratio:4/3}}@media (prefers-reduced-motion:no-preference){.lp .xp-demo .xd-scene *{animation-duration:var(--xd-loop);animation-iteration-count:infinite;animation-fill-mode:both}.lp .xp-demo .xd-hero .xd-cursor{animation-name:xd-hero-cursor}.lp .xp-demo .xd-hero .xd-click{animation-name:xd-hero-click}.lp .xp-demo .xd-hero .xd-word-text{animation-name:xd-hero-word}.lp .xp-demo .xd-hero .xd-bubble{animation-name:xd-hero-bubble}.lp .xp-demo .xd-hero .xd-sense-main{animation-name:xd-hero-row}.lp .xp-demo .xd-hero .xd-tip{animation-name:xd-hero-tip}.lp .xp-demo .xd-hero .xd-card{animation-name:xd-hero-card}.lp .xp-demo .xd-hero .xd-add-plus{animation-name:xd-hero-plus}.lp .xp-demo .xd-hero .xd-add-saved{animation-name:xd-hero-saved}.lp .xp-demo .xd-hero .xd-bezel-pause{animation-name:xd-hero-bezel-pause}.lp .xp-demo .xd-hero .xd-bezel-play{animation-name:xd-hero-bezel-play}.lp .xp-demo .xd-hero .xd-state-playing{animation-name:xd-hero-playing}.lp .xp-demo .xd-hero .xd-state-paused{animation-name:xd-hero-paused}.lp .xp-demo .xd-hero .xd-progress i{animation-name:xd-hero-progress;animation-timing-function:linear}}@keyframes xd-hero-cursor{0%{opacity:0;transform:translate(13em,7em)}5%{opacity:1;transform:translate(13em,7em);animation-timing-function:ease-in-out}16%,32%{transform:translate(.2em,.5em);animation-timing-function:ease-in-out}40%,51%{transform:translate(var(--xd-row-x,6.85em),var(--xd-row-y,-6.65em));animation-timing-function:ease-in-out}58%,74%{opacity:1;transform:translate(var(--xd-add-x,7.8em),var(--xd-add-y,-11.25em));animation-timing-function:ease-in-out}86%{opacity:1;transform:translate(13em,7em)}92%,to{opacity:0;transform:translate(13em,7em)}}@keyframes xd-hero-click{0%,40.9%{opacity:0;transform:scale(.25)}41%{opacity:.95;transform:scale(.25)}44%,58.9%{opacity:0;transform:scale(1)}59%{opacity:.95;transform:scale(.25)}62%,to{opacity:0;transform:scale(1)}}@keyframes xd-hero-word{0%,16%{background:transparent;color:inherit}17%,80%{background:#427860;color:#fff}82%,to{background:transparent;color:inherit}}@keyframes xd-hero-bubble{0%,18%{opacity:0;transform:translate(-50%,.4em)}21%,41.5%{opacity:1;transform:translate(-50%)}43.5%,to{opacity:0;transform:translate(-50%)}}@keyframes xd-hero-row{0%,38.5%{background:transparent}39.5%,42%{background:#2c5245}43%,to{background:transparent}}@keyframes xd-hero-tip{0%,18%{opacity:0;background:#203b32}21%,42%{opacity:1;background:#203b32}44%,78%{opacity:1;background:#1f232b}80.5%,to{opacity:0;background:#1f232b}}@keyframes xd-hero-card{0%,42%{opacity:0;transform:translate(-50%,.4em)}44.5%,78%{opacity:1;transform:translate(-50%)}80.5%,to{opacity:0;transform:translate(-50%)}}@keyframes xd-hero-plus{0%,57%{opacity:1;background:#ffffff08}58%,59%{opacity:1;background:#ffffff1f}60.5%,to{opacity:0;background:#ffffff1f}}@keyframes xd-hero-saved{0%,59%{opacity:0;transform:scale(.85)}61.5%,to{opacity:1;transform:scale(1)}}@keyframes xd-hero-bezel-pause{0%,17%{opacity:0;transform:scale(.7)}18%{opacity:1;transform:scale(.9)}23%,to{opacity:0;transform:scale(1.15)}}@keyframes xd-hero-bezel-play{0%,81%{opacity:0;transform:scale(.7)}82%{opacity:1;transform:scale(.9)}87%,to{opacity:0;transform:scale(1.15)}}@keyframes xd-hero-playing{0%,17%{opacity:1}17.1%,80.9%{opacity:0}81%,to{opacity:1}}@keyframes xd-hero-paused{0%,17%{opacity:0}17.1%,80.9%{opacity:1}81%,to{opacity:0}}@keyframes xd-hero-progress{0%{transform:scaleX(.336)}17%,81%{transform:scaleX(.343)}to{transform:scaleX(.35)}}@media (prefers-reduced-motion:reduce){.lp .xp-demo .xp-pause{display:none}.lp .xp-demo .xd-hero .xd-bubble,.lp .xp-demo .xd-hero .xd-tip{opacity:1}}