.eg{display:grid;grid-template-columns:minmax(0,1fr);gap:.5rem;margin:.5rem 0 0;padding:.75rem 1rem;border-radius:.75rem;border:1.5px solid rgba(128,128,128,.25);background:var(--pt-sand)}html.dark .eg{background:rgba(255,255,255,3%)}.eg-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1rem}.eg-title{font-weight:700;font-size:1.15rem}.eg-caption kbd,.eg-try kbd{display:inline-block;min-width:1.6em;padding:0 .35em;border:1px solid color-mix(in srgb,currentColor 35%,transparent);border-bottom-width:2px;border-radius:5px;font-family:inherit;font-size:.9em;line-height:1.4;text-align:center;background:color-mix(in srgb,#fff 70%,transparent)}html.dark .eg-caption kbd{background:#1b1b1b}.eg-try{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem .6rem;margin-top:.5rem;padding:.45rem .75rem;border-inline-start:4px solid var(--pt-accent);border-start-end-radius:.5rem;border-end-end-radius:.5rem;background:var(--pt-accent-soft)}.eg-try-head{font-weight:700;color:var(--pt-accent)}.eg-try-text{flex:1 1 14rem}.eg-try-text>p{margin:0}.eg-done{visibility:hidden;font-weight:700;color:#2f8a4c}html.dark .eg-done{color:#74c48f}.is-done .eg-try{border-color:#2f8a4c;background:color-mix(in srgb,#2f8a4c 10%,transparent)}.is-done .eg-try-head{color:#2f8a4c}.is-on.is-done .eg-done{visibility:visible;animation:eg-pop .35s ease-out}@keyframes eg-pop{from{transform:scale(.6);opacity:0}}.eg-next{visibility:hidden;margin-top:.5rem;padding:.3rem 1rem;border:0;border-radius:999px;background:var(--pt-tile);color:#fff;font:inherit;font-weight:600;cursor:pointer}html.dark .eg-next{color:#111}.is-on.is-done .eg-next{visibility:visible;animation:eg-pop .35s ease-out}.a11y-motion .eg-next{animation:none}.eg .eg-play{width:auto;padding:0 1rem 0 .8rem;gap:.4rem;font-weight:600}.eg .eg-play span{white-space:nowrap}.eg .anim-btn.eg-ready{background:var(--pt-tile);color:#fff;animation:eg-call 1.4s ease-in-out 2}html.dark .eg .anim-btn.eg-ready{color:#111}@keyframes eg-call{50%{box-shadow:0 0 0 6px var(--pt-tile-soft)}}.eg-stage{position:relative;container-type:inline-size}.eg-stage .expr-tool{margin-top:0}.eg-stage .expr-ops{display:none}.eg-stage .expr-pad button[data-key="0.3.8"]{visibility:hidden}.eg .expr-pad button.is-key{border-color:var(--pt-tile);box-shadow:0 0 0 1px var(--pt-tile);background:var(--pt-tile-soft);color:var(--pt-tile);font-weight:700}.eg .expr-pad button.eg-flash{background:var(--pt-tile);color:#fff;border-color:var(--pt-tile);transition:none}html.dark .eg .expr-pad button.eg-flash{color:#111}.eg-pointer{position:absolute;top:0;left:0;z-index:20;width:1.75rem;height:1.75rem;margin:-.15rem 0 0 -.3rem;opacity:0;pointer-events:none;fill:#fff;stroke:#111;stroke-width:1.3;stroke-linejoin:round;filter:drop-shadow(0 2px 3px rgb(0 0 0/.3));transition:opacity .3s}.eg-pointer.is-on{opacity:1}.eg-pointer.is-click{animation:eg-click .3s ease-out}.eg-here{position:absolute;top:0;left:0;z-index:20;pointer-events:none;opacity:0;transition:opacity .3s}.eg-here.is-on{opacity:1}.eg-here-pointer{display:block;width:1.75rem;height:1.75rem;margin:-.15rem 0 0 -.3rem;fill:#fff;stroke:#111;stroke-width:1.3;stroke-linejoin:round;filter:drop-shadow(0 2px 3px rgb(0 0 0/.3));animation:eg-nudge 1.6s ease-in-out infinite}.eg-here .eg-said{top:.6rem;left:1.4rem;opacity:1}@keyframes eg-nudge{50%{transform:translate(-3px,-3px)}}.a11y-motion .eg-here-pointer{animation:none}.eg-captions{transition:opacity .5s}.eg.is-hushed .eg-captions{opacity:0;transition:none}.eg-said{position:absolute;top:0;left:0;z-index:21;padding:0 .25rem;color:var(--pt-tile);font-size:.95rem;font-weight:600;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s;text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 6px #fff}html.dark .eg-said{text-shadow:0 0 3px #161616,0 0 3px #161616,0 0 6px #161616}.eg-said.is-on{opacity:1}.eg-own{text-shadow:none;padding:.15rem .5rem;border-radius:6px;background:var(--pt-sand);box-shadow:0 1px 4px rgb(0 0 0/.15)}html.dark .eg-own{background:#1b1b1b;text-shadow:none}@keyframes eg-click{50%{scale:.8}}.eg-keyboard{--u:min(2.6rem, (100cqw - 0.5rem) / 21);--gap:calc(var(--u) * 0.1);display:flex;align-items:flex-end;gap:calc(var(--u) * .5);width:fit-content;max-width:100%;margin:.75rem auto 0;padding:calc(var(--u) * .25);border-radius:calc(var(--u) * .3);background:color-mix(in srgb,currentColor 9%,transparent);user-select:none}.eg-keyboard{cursor:default}.eg-main,.eg-arrows{display:grid;gap:var(--gap)}.eg-row{display:flex;gap:var(--gap)}.eg-k{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none;width:calc(var(--u) * var(--w) + var(--gap) * (var(--w) - 1));height:var(--u);border-radius:calc(var(--u) * .14);background:#fff;color:#333;box-shadow:0 calc(var(--u) * .06)color-mix(in srgb,#000 22%,transparent);font-size:calc(var(--u) * .36);line-height:1.05;transition:transform .08s,background-color .08s,box-shadow .08s}html.dark .eg-k{background:#2a2a2a;color:#ddd;box-shadow:0 calc(var(--u) * .06)#000}.eg-k small{font-size:.78em;opacity:.6}.eg-k-letter{font-size:calc(var(--u) * .33)}.eg-k-gap{visibility:hidden}.eg-k-idle{opacity:.4}.eg-k.is-key{background:var(--pt-tile-soft);color:var(--pt-tile);box-shadow:0 0 0 2px var(--pt-tile),0 calc(var(--u) * .06)color-mix(in srgb,var(--pt-tile) 60%,#000);font-weight:700;opacity:1}.eg-k.is-down{transform:translateY(calc(var(--u) * .06));background:var(--pt-tile);color:#fff;box-shadow:0 0 color-mix(in srgb,#000 22%,transparent);opacity:1}html.dark .eg-k.is-down{color:#111}.a11y-motion :is(.eg-pointer,.eg-said){transition:none}.a11y-motion .eg :is(.eg-done,.anim-btn.eg-ready){animation:none}@media print{.eg-bar,.eg-keyboard,.eg-pointer,.eg-said{display:none}}.eg-stage .expr-hint{display:none}.eg-stage .expr-pad{display:block;visibility:hidden}.eg-stage .expr-tool:focus-within .expr-pad{visibility:visible}.eg-stage .expr-feedback{display:none}.eg{container-type:inline-size}.eg-stage{display:grid;grid-template-columns:20.5rem minmax(0,1fr);column-gap:1rem;align-items:start}.eg-stage .expr-tool{display:contents}.eg-stage .expr-lines{grid-column:1/-1;margin-top:0}.eg-stage .expr-pad{grid-column:1;margin-top:.5rem}.eg-side{grid-column:2;display:grid;gap:.5rem;margin-top:.5rem}.eg-stage .expr-line-body{min-height:6.25rem}.eg-keyboard{grid-column:1/-1}@container(max-width:40rem){.eg-stage { grid-template-columns: minmax(0, 1fr); }
  .eg-side { grid-column: 1; grid-row: 4; }
}.eg-side .eg-caption{line-height:1.45}.eg-text :is(ul,ol){margin:.15rem 0 0;padding-inline-start:1.25rem}.eg-text ul{list-style:disc}.eg-text li+li{margin-top:.1rem}.eg-text>p{margin:0}.eg-here-caret .eg-here-pointer{display:none}.eg-here-caret .eg-said{top:0;left:0;transform:translateY(-50%)}.eg-here .eg-said kbd{padding:0 .3em;border:1px solid;border-radius:4px;font-family:inherit;font-size:.95em;background:0 0}