/* The 4D hypercube's demo: a .demo (demo.css) printed in the Projects terminal (.term in style.css). What's
   here is the cube itself, its controls and the panels in its documentation, scoped to .hc. */
.hc{--sq:clamp(6px,.62vw,10px)}

/* the cube: full width of the column; shorter while the documentation is open above it */
.hc-view{position:relative;height:calc((100cqw + var(--gw) + var(--padr) - 20px) * .75);margin:2px calc(-1 * var(--padr) + 10px) 4px calc(-1 * var(--gw) + 10px);-webkit-user-select:none;user-select:none;transition:height .35s cubic-bezier(.2,.7,.2,1)}
.hc.open .hc-view{height:min((100cqw + var(--gw) + var(--padr) - 20px) * .75,30vh)}
#hc-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:none}
#hc-canvas:active{cursor:grabbing}
.hc-speed{display:flex;align-items:baseline}
.hc-speed>span{margin-right:1ch;color:var(--muted)}
.hc .cellchip{display:inline-flex;align-items:center;gap:.7ch}
.hc .cellchip i{width:9px;height:9px;display:inline-block;border-radius:1px;flex:none}

/* opened fully, beside its documentation (.term.max): the cube keeps the column's width and fits the window
   above the controls, so every exhibit plays on a cube you can see */
.term.max .hc-view{margin-right:0;height:calc((var(--c1) + var(--gw) - 26px) * .75)}
.term.max .hc.open .hc-view{height:min((var(--c1) + var(--gw) - 26px) * .75,100vh - var(--demo-top,0px) - 4 * var(--lh) - 30px)}

/* the panels in the documentation */
.hc .tape{display:grid;grid-template-columns:4ch minmax(0,1fr) auto;align-items:center}
.hc .tape .sq{display:flex;align-items:center;gap:2px}
.hc .tape .sq i{width:var(--sq);height:var(--sq);display:block;border-radius:1px;transition:background-color .15s}
.hc .tape .sq b{width:calc(var(--sq) * .6);flex:none}
.hc .legend{justify-content:flex-start;gap:0 .4ch;margin-left:-.5ch}