/* Sleepy and Wobbly: the page's own styles, on top of /assets/site.css and the shared specimen stage (/shared/css/theme.css, stage.css). */
body.sleepy-and-wobbly{--specimen-bg:#14121F}
.sleepy-and-wobbly .stage canvas{cursor:pointer}
.sleepy-and-wobbly .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 moves with transforms only */
#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:scale var(--dur-gelatin) var(--spring-gelatin),background-color .2s,color .2s}
#go:hover{background:var(--cyan);color:var(--bg)}
#go:active{scale:.9 1.1}
#go[hidden]{display:none}
@media(hover:hover){#go:hover{scale:1.04 .96}}

/* 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:scale var(--dur-gelatin,.4s) var(--spring-gelatin,ease),color .2s}
.sound-toggle[aria-pressed=false]{color:var(--glass-panel-muted,rgba(255,255,255,.6))}
.sound-toggle:active{scale:.9 1.1}
@media(hover:hover){.sound-toggle:hover{scale:1.06 .94}}
@media(prefers-reduced-motion:reduce){#go:hover,#go:active,.sound-toggle:hover,.sound-toggle:active{scale:none}}

/* ?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}