i've been taking the 200k character limit for granted

fun character saves

attributes don't need quotes if there aren't any spaces in the content
you only need a closing tag if you don't want the following element to be nested
using inset instead of both top and left
the last property doesn't need to end with a semicolon
the play button is moved using the width of the main div whereas the initial bird is moved using its height
the bottom pipe is a shadow
the pipes get their width from the text a pipe
the colors are 3-digit hex codes
the properties with multiple parameters don't always have to be space separated (e.g.inset:calc(8rem + 1000%)5rem, box-shadow:0 20rem 0 0#222)

thank you @obspogon for introducing me to CSSBattle from which i got several ideas for this
it has a tips page with more stuff like this
aaa the box-shadow from @‌selenit's top solution to 2023-09-30's daily puzzle

all of this was to get under the character limit but there are probably a lot of places where i could save characters
if you find one please do share

actually why is the limit 1120 characters

anyways it was fun to finally actually finish one of these for once
the limit was really helpful for avoiding scope creep

source (before minification — 1168 characters)

# onejump
interactable, has animation
<div style=margin:auto;width:24rem;height:24rem;background:#fdc;border-radius:.5rem;overflow:hidden>
  <details style=position:relative;width:min-content>
    <summary style="position:absolute;inset:10rem calc(9rem + 1000%);width:6rem;font-size:0;line-height:2;text-align:center"><div style=font-size:1rem;background:#824;color:#fff;border-radius:.5rem>play</summary>
    <div style="position:absolute;left:32rem;top:-5rem;height:9rem;background:#222;animation:4s spin reverse linear;transform:translateX(-50rem);box-shadow:0 20rem 0 0#222">a pipe</div>
    <div style="animation:4s spin reverse linear;transform:translateY(85rem)">
      <div style="position:absolute;inset:calc(8rem + 1000%)5rem;background:#824;width:3rem;height:3rem;animation:1s spin reverse cubic-bezier(.33,0,.67,.33);transform:translateY(-24rem)"></div>
      <details style=width:50rem>
        <summary style=position:absolute;top:-99rem;height:200rem;width:32rem></summary>
        <div style="position:relative;inset:-16rem 5rem;width:3rem;height:3rem;background:#824;animation:1s spin reverse cubic-bezier(.33,0,.67,.33);transform:translateY(-24rem)">

source (after minification — 1118 characters)

# onejump
interactable, has animation
<div style=margin:auto;width:24rem;height:24rem;background:#fdc;border-radius:.5rem;overflow:hidden><details style=position:relative;width:min-content><summary style="position:absolute;inset:10rem calc(9rem + 1000%);width:6rem;font-size:0;line-height:2;text-align:center"><div style=font-size:1rem;background:#824;color:#fff;border-radius:.5rem>play</summary><div style="position:absolute;left:32rem;top:-5rem;height:9rem;background:#222;animation:4s spin reverse linear;transform:translateX(-50rem);box-shadow:0 20rem 0 0#222">a pipe</div><div style="animation:4s spin reverse linear;transform:translateY(85rem)"><div style="position:absolute;inset:calc(8rem + 1000%)5rem;background:#824;width:3rem;height:3rem;animation:1s spin reverse cubic-bezier(.33,0,.67,.33);transform:translateY(-24rem)"></div><details style=width:50rem><summary style=position:absolute;top:-99rem;height:200rem;width:32rem></summary><div style="position:relative;inset:-16rem 5rem;width:3rem;height:3rem;background:#824;animation:1s spin reverse cubic-bezier(.33,0,.67,.33);transform:translateY(-24rem)">

beth (defunct)

@bethposting

rip

@cefqrn says

onejump

i've been taking the 200k character limit for granted

fun character saves

in reply to @onepost's post: