/* Bouncy and Squeezy: the page's own styles, on top of /assets/site.css and the shared specimen stage (/shared/css/theme.css, stage.css). */
body.bouncy-and-squeezy{--specimen-bg:#14121F}
.bouncy-and-squeezy .stage canvas{cursor:pointer}
.bouncy-and-squeezy .stage.running canvas{cursor:default}
#lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.stage.flat #lines{pointer-events:auto}                     /* the simple version draws everything here, so a tap lands here */

/* Drop it / Again: one button, bottom centre. It never changes size on hover or press (a scaling button moves out from under the pointer at its edge and flickers) */
#go{position:absolute;z-index:6;left:50%;bottom:clamp(18px,4vw,34px);translate:-50% 0;min-height:48px;padding:0 28px;
  border:1px solid var(--cyan);border-radius:999px;background:rgba(20,18,31,.72);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  color:var(--cyan);font:500 12px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;cursor:pointer;
  box-shadow:0 0 30px -12px rgba(5,217,232,.6);transition:background-color .2s,color .2s}
#go:hover{background:var(--cyan);color:var(--bg)}
/* the site's hover wobble (play.css: button:hover{animation:lab-peck}) resets translate to 0, which throws the centred button 60 px right and back as the pointer crosses it */
#go:hover,#go:active,.sound-toggle:hover,.sound-toggle:active{animation:none}
#go[hidden]{display:none}

/* the sound button: the same look as the blob pages' (/assets/sounds.js), bottom left */
.sound-toggle{position:absolute;z-index:6;left:clamp(14px,3vw,26px);bottom:clamp(14px,3vw,26px);
  width:44px;height:44px;display:grid;place-items:center;padding:0;border:1px solid var(--glass-border,rgba(255,255,255,.12));
  border-radius:14px;background:var(--glass-panel,rgba(255,255,255,.03));-webkit-backdrop-filter:var(--blur,blur(12px));
  backdrop-filter:var(--blur,blur(12px));color:var(--glass-panel-text,#fff);cursor:pointer;touch-action:manipulation;
  box-shadow:0 0 30px -12px rgba(5,217,232,.5);transition:color .2s}
.sound-toggle[aria-pressed=false]{color:var(--glass-panel-muted,rgba(255,255,255,.6))}

/* ?record=1: only the stage, as a centred frame on black (9:16, or 16:9 / 1:1 with &frame=wide / square) */
html.record,html.record body{height:100%;margin:0;overflow:hidden;background:#000}
html.record body>:not(main),html.record main>:not(#stage){display:none!important}
html.record #stage{position:fixed;left:50%;top:50%;translate:-50% -50%;width:min(100vw,calc(100vh * 9 / 16));height:auto;aspect-ratio:9/16;
  min-height:0;border:0}
html.record.frame-wide #stage{width:min(100vw,calc(100vh * 16 / 9));aspect-ratio:16/9}
html.record.frame-square #stage{width:min(100vw,100vh);aspect-ratio:1}
html.record #overlay,html.record #go,html.record #sound{display:none!important}
html.record .stage canvas{cursor:none}