:root{--base-color:#fff;--safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);font-family:sans-serif;color:#161614;background:var(--base-color)}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none}
main,.demo{position:fixed;inset:0;overflow:hidden}
  :root {
    --ink: 22 22 20;
    --ease-swap: cubic-bezier(.76, 0, .18, 1);
  }
  .demo[data-demo="trefoil"] { background:var(--base-color); }
  .demo[data-demo="leaves"] { background:#f2e8d7; }
  .demo iframe { display:block; width:100%; height:100%; border:0; }
  .demo { opacity:0; }
  .demo[inert] { pointer-events:none; }
  .demo[hidden] { visibility:hidden; display:block; }
  #backdrop, #leaves-sky { position:fixed; inset:0; height:100lvh; pointer-events:none; }
  #backdrop { background:radial-gradient(ellipse 25% 17% at 46% 64%, rgb(253 226 228 / .32), transparent),
                          radial-gradient(ellipse 32% 20% at 55% 71%, rgb(224 233 249 / .34), transparent), var(--base-color,#fff); }
  #leaves-sky { opacity:0; background-color:var(--edge); background-image:var(--glow,none),var(--sky-x),var(--sky-y);
                background-blend-mode:screen,multiply,normal; }
  html[data-first-demo=leaves] #leaves-sky { opacity:1; }
  /* First-paint skies from leaves/index.html, in the same viewport coordinate space as the iframe. */
  #leaves-sky, html[data-sky-theme=light] #leaves-sky { --edge: #e8ecf0; --sky-y: linear-gradient(#ebedf0 1%, #edeff1 13%, #efeff1 25%, #f0f0f0 38%, #f3f1f0 50%, #f5f3f0 62%, #f5f2ef 75%, #f5f2ed 87%, #f3f0ea 99%);
    --sky-x: linear-gradient(90deg, #f8f9fb 2%, #f9fafc 21%, #f9fafc 40%, #fafbfd 60%, #fcfcfe 79%, #ffffff 98%);
    --glow: radial-gradient(circle 160.0vh at calc(50% + 22.7vh) 10.6%, #938962 0%, #797550 1.5%, #4f5343 4%, #162421 8%, #05171a 14%, #05171a 22%, #051718 33%, #000f0f 48%, #000000 70%, #000000 100%); }
  html[data-sky-theme=dark] #leaves-sky { --edge: #57473f; --sky-y: linear-gradient(#754b23 1%, #865b29 13%, #7b5227 25%, #5c391d 38%, #472b18 50%, #362014 62%, #26150f 75%, #1a0e0b 87%, #0f0707 99%);
    --sky-x: linear-gradient(90deg, #240e1a 2%, #392431 21%, #584453 40%, #817181 60%, #b7b1be 79%, #ffffff 98%);
    --glow: radial-gradient(circle 160.0vh at calc(50% + 22.7vh) 13.8%, #553c3c 0%, #4d3b3b 1.5%, #3d3438 4%, #2e2f34 8%, #292e34 14%, #292e34 33%, #272c34 48%, #242932 70%, #000000 100%); }
  html[data-sky-theme=fall] #leaves-sky { --edge: #f2e8d7; --sky-y: linear-gradient(#f3e9d7 1%, #f4ead8 13%, #f4e9d6 25%, #f4e7d1 38%, #f3e4cc 50%, #f2dec0 62%, #f1dab9 75%, #f0dab9 87%, #edd6b4 99%);
    --sky-x: linear-gradient(90deg, #fcfcfc 2%, #fdfdfe 21%, #fefeff 40%, #feffff 60%, #ffffff 79%, #ffffff 98%);
    --glow: radial-gradient(circle 90.0vh at calc(50% + 22.3vh) 64.8%, #191d1b 0%, #0a1917 1.5%, #0a1613 4%, #090f0e 8%, #050a07 14%, #040404 22%, #020404 33%, #010404 48%, #000304 70%, #000000 100%); }
  @media (min-aspect-ratio: 6/5) { #leaves-sky, html[data-sky-theme=light] #leaves-sky { --edge: #e9ebec; --sky-y: linear-gradient(#edeeef 1%, #f1f1f1 13%, #f2f1f1 25%, #f5f3f1 38%, #f6f3f0 50%, #f6f2ee 62%, #f5f1ec 75%, #f3efe9 87%, #f0ebe5 99%);
    --sky-x: linear-gradient(90deg, #e6e6e2 0%, #f4f6f6 20%, #f8fbfc 40%, #fcfeff 60%, #fffffc 80%, #f8f7f3 100%);
    --glow: radial-gradient(circle 90.0vw at 70.1% calc(50% + -22.9vw), #f0dead 0%, #f0a744 1.5%, #cc9444 4%, #a98444 8%, #5a4b3b 14%, #0f1626 22%, #0f1626 48%, #000610 70%, #000000 100%); } }
  @media (min-aspect-ratio: 6/5) { html[data-sky-theme=dark] #leaves-sky { --edge: #55463e; --sky-y: linear-gradient(#a6572a 1%, #f07337 13%, #ae5b2d 25%, #7e4b2a 38%, #533422 50%, #36231b 62%, #221716 75%, #150f11 87%, #0b070b 99%);
    --sky-x: linear-gradient(90deg, #000000 0%, #000017 20%, #232957 40%, #9fb8ce 60%, #c5ecfd 80%, #36436c 100%);
    --glow: radial-gradient(circle 120.0vw at 70.2% calc(50% + -22.7vw), #ff9f88 0%, #ff9572 1.5%, #6d684d 4%, #323f38 8%, #292a2e 14%, #292a2e 33%, #24282e 48%, #1f242c 70%, #000000 100%); } }
  @media (min-aspect-ratio: 6/5) { html[data-sky-theme=fall] #leaves-sky { --edge: #efe1cb; --sky-y: linear-gradient(#f4e8d3 1%, #f6e9d5 13%, #f5e8d3 25%, #f5e5cc 38%, #f4e2c5 50%, #f3ddbd 62%, #efd5b1 75%, #e9c99f 87%, #e3c296 99%);
    --sky-x: linear-gradient(90deg, #e2d2be 0%, #f2eee8 20%, #fbfcfe 40%, #fdfdfe 60%, #fdfcfa 80%, #f5eada 100%);
    --glow: radial-gradient(circle 90.0vw at 52.5% calc(50% + 26.9vw), #666053 0%, #605e51 1.5%, #5c584c 4%, #53493e 8%, #41342b 14%, #281c17 22%, #231c17 33%, #231c17 48%, #221b15 70%, #000000 100%); } }
  @media (min-aspect-ratio: 19/10) { #leaves-sky, html[data-sky-theme=light] #leaves-sky { --edge: #e9ebec; --sky-y: linear-gradient(#eceeef 1%, #eff0f1 13%, #f0f0f1 25%, #f3f2f1 38%, #f5f3f0 50%, #f6f2ef 62%, #f5f2ee 75%, #f5f0ec 87%, #f3efe9 99%);
    --sky-x: linear-gradient(90deg, #e2e2df 0%, #f2f5f6 20%, #f6fafc 40%, #fafdff 60%, #fffffc 80%, #f4f4ef 100%);
    --glow: radial-gradient(circle 90.0vw at 69.4% calc(50% + -16.9vw), #f2d380 0%, #eeae4c 1.5%, #cf9b4c 4%, #a8824c 8%, #564939 14%, #2c252b 22%, #2c252b 33%, #2c2529 48%, #0b080c 70%, #000000 100%); } }
  @media (min-aspect-ratio: 19/10) { html[data-sky-theme=dark] #leaves-sky { --edge: #594840; --sky-y: linear-gradient(#a64e40 1%, #e76446 13%, #b35844 25%, #955445 38%, #6c4445 50%, #4e3444 62%, #372743 75%, #271c41 87%, #1b143e 99%);
    --sky-x: linear-gradient(90deg, #051595 0%, #0000ac 20%, #1c2aca 40%, #99b1e5 60%, #bdedfe 80%, #2a3dcf 100%);
    --glow: radial-gradient(circle 90.0vw at 69.4% calc(50% + -17.7vw), #ffae7e 0%, #ffa66f 1.5%, #cc8d4b 4%, #56582c 8%, #2d3517 14%, #2d2a09 22%, #2d2a03 33%, #2a2a03 48%, #212403 70%, #000000 100%); } }
  @media (min-aspect-ratio: 19/10) { html[data-sky-theme=fall] #leaves-sky { --edge: #efe1cb; --sky-y: linear-gradient(#f4e8d2 1%, #f5e9d2 13%, #f5e8d1 25%, #f5e6cc 38%, #f5e4c7 50%, #f4e1c2 62%, #f3debd 75%, #f1dab5 87%, #eed5af 99%);
    --sky-x: linear-gradient(90deg, #e2d3bf 0%, #f4f1ee 20%, #fcfdff 40%, #feffff 60%, #fdfbf6 80%, #f5e8d2 100%);
    --glow: radial-gradient(circle 90.0vw at 71.6% calc(50% + -16.2vw), #9d2a25 0%, #7d1c25 1.5%, #491c25 4%, #181c25 8%, #151c25 14%, #151c25 22%, #15191f 33%, #120e11 48%, #090708 70%, #000000 100%); } }

  /* the dock: a barely-there pill that sits into the page */
  .dock { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%);
          display: flex; gap: 2px; padding: 3px 8px; border-radius: 999px;
          background: rgb(var(--ink) / .035); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
  .dock button { position: relative; width: 40px; height: 40px; border: 0; border-radius: 50%; padding: 0; cursor: pointer;
                 background: transparent; color: rgb(var(--ink) / .32); display: grid; place-items: center;
                 transition: color .3s; }
  .dock button:hover { color: rgb(var(--ink) / .5); }
  .dock button[aria-current="true"] { color: rgb(var(--ink) / .62); }
  .dock button[aria-current="true"]:hover { color: rgb(var(--ink) / .7); }
  .dock svg { width: 20px; height: 20px; overflow: visible; }
  /* active marker: a tiny faint dot under the current icon */
  .bead { position: absolute; bottom: 4px; width: 3px; height: 3px; border-radius: 999px; background: rgb(var(--ink) / .28);
          transition: left .56s var(--ease-swap), width .56s var(--ease-swap); }

.dock { z-index:10; font:500 11px "DM Mono",ui-monospace,monospace; }
.dock[data-dark] { --ink:245 243 240; }
.dock button:focus-visible { outline:1px solid rgb(var(--ink) / .4); outline-offset:-2px; }
.bead { left:28px; transform:translateX(-50%); pointer-events:none; }
@media (prefers-reduced-motion:reduce) {
  .dock button,.bead { transition:none; }
}