/* Plump and Squishy: the page's own styles, on top of /assets/site.css and the shared specimen stage (/shared/css/theme.css, stage.css). */
body.plump-and-squishy{--specimen-bg:#14121F}
.plump-and-squishy .stage canvas{cursor:grab;touch-action:pan-y}            /* sideways drags move the jelly; up and down still scroll the page */
.plump-and-squishy .stage.grabbing canvas{cursor:grabbing}

/* the line above the sliders: what is happening to the jelly */
.pq-status{grid-column:1/-1;display:flex;justify-content:space-between;gap:16px;margin:0;font:500 11px/1.5 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--glass-panel-muted);min-height:1.5em}
.pq-read{color:var(--cyan);font-variant-numeric:tabular-nums;white-space:nowrap}
.stage[data-state=stuck] .pq-status{color:var(--magenta-text)}
.stage[data-state=inside] .pq-status{color:var(--cyan)}

/* the controls: three sliders and a button, glass over the bottom of the stage (the drawing leaves room for them) */
.pq-panel{position:absolute;z-index:6;left:clamp(12px,2.4vw,22px);right:clamp(12px,2.4vw,22px);bottom:clamp(12px,2.4vw,22px);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:clamp(14px,2.4vw,28px);align-items:end;padding:14px clamp(14px,2.4vw,24px) 14px;
  border:1px solid var(--glass-border);border-radius:18px;background:rgba(20,18,31,.72);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  box-shadow:0 0 40px -18px rgba(5,217,232,.6)}
.pq-field{display:grid;gap:6px;min-width:0}
.pq-cap{display:flex;justify-content:space-between;gap:10px;font:500 10.5px/1.3 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--glass-panel-muted)}
.pq-cap output{color:var(--cyan);font-variant-numeric:tabular-nums}
.pq-ends{display:flex;justify-content:space-between;font:500 9.5px/1.2 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}

.pq-panel input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:30px;margin:0;background:transparent;cursor:pointer;touch-action:pan-y}
.pq-panel input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:rgba(255,255,255,.22)}
.pq-panel input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:rgba(255,255,255,.22)}
.pq-panel input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-9px;border-radius:50%;border:2px solid #fff;background:var(--cyan);box-shadow:0 0 16px rgba(5,217,232,.7)}
.pq-panel input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;border:2px solid #fff;background:var(--cyan);box-shadow:0 0 16px rgba(5,217,232,.7)}
.pq-panel input[type=range]:focus-visible{outline:none}
.pq-panel input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(5,217,232,.35),0 0 16px rgba(5,217,232,.7)}
.pq-panel input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px rgba(5,217,232,.35),0 0 16px rgba(5,217,232,.7)}

/* Send him through: a button that never changes size on hover or press (a scaling button moves out from under the pointer at its edge and flickers) */
#go{min-height:48px;padding:0 24px;border:1px solid var(--cyan);border-radius:999px;background:rgba(20,18,31,.72);color:var(--cyan);cursor:pointer;
  font:500 12px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;touch-action:manipulation;
  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)}
#go:hover,#go:active{animation:none}                                         /* the site's hover wobble (play.css) would move it */

@media(max-width:720px){
  body.plump-and-squishy{--specimen-stage-h:min(74vh,560px);--specimen-stage-min:500px}   /* the tube is small on a phone: a shorter stage keeps it close to the controls */
  .pq-panel{grid-template-columns:1fr 1fr;gap:6px 18px;padding:12px 14px}
  .pq-field:nth-child(2){grid-column:1/-1}
  #go{grid-column:1/-1}
  .pq-ends{display:none}
  .pq-status{min-height:3em}                                                     /* two lines kept free, so the panel never changes height */
  .pq-panel input[type=range]{height:26px}
}
@media(prefers-reduced-motion:reduce){#go{transition: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 .pq-panel{display:none!important}
html.record .stage canvas{cursor:none}