body.playground-juice-js .juice-tween-lab{color:#14213d;background:#eef3ff;grid-template-columns:minmax(360px,420px) minmax(0,1fr);height:calc(100vh - 66px);min-height:calc(100vh - 66px);font-family:Proxima Nova,Georgia,sans-serif;display:grid}body.playground-juice-js .juice-tween-lab__controls{z-index:1;background:#fff;flex-direction:column;min-width:0;min-height:0;display:flex;overflow-x:hidden;box-shadow:14px 0 32px #14213d14}body.playground-juice-js .juice-tween-lab__control-scroll{overscroll-behavior:contain;flex:1;min-width:0;min-height:0;padding:clamp(2rem,5vw,4.5rem);overflow:hidden auto}body.playground-juice-js .juice-tween-lab [hidden]{display:none}body.playground-juice-js .juice-tween-lab__eyebrow{color:#2949fd;letter-spacing:.13em;text-transform:uppercase;margin:0 0 .45rem;font-size:.75rem;font-weight:700}body.playground-juice-js .juice-tween-lab h1{color:#172554;margin:0 0 1rem;font-size:clamp(2rem,3.5vw,3rem);line-height:1}body.playground-juice-js .juice-tween-lab h2{color:#172554;margin:0;font-size:1.15rem}body.playground-juice-js .juice-tween-lab p{color:#52606f;line-height:1.55}body.playground-juice-js .juice-tween-lab label{color:#172554;justify-content:space-between;margin:1rem 0 .45rem;font-size:.85rem;font-weight:700;display:flex}body.playground-juice-js .juice-tween-lab output{color:#2949fd}body.playground-juice-js .juice-tween-lab input,body.playground-juice-js .juice-tween-lab select{accent-color:#2949fd;width:100%}body.playground-juice-js .juice-tween-lab select{background:#fff;border:1px solid #cad5eb;border-radius:.55rem;padding:.65rem}body.playground-juice-js .juice-tween-lab__mode-switch{--input-height:2.35rem;--input-padding:0;--form-input-border-radius:.55rem;width:100%;margin-top:1.5rem;display:flex}body.playground-juice-js .juice-tween-lab__control-group{border-top:1px solid #e2e8f5;margin-top:1.8rem;padding-top:1.5rem}body.playground-juice-js .juice-tween-lab__axis-control{background:#f8faff;border:1px solid #d9e2f4;border-radius:.65rem;grid-template-columns:1fr 1.25fr;align-items:center;gap:.45rem .65rem;margin-top:1rem;padding:.85rem;display:grid}body.playground-juice-js .juice-tween-lab__axis-control strong{color:#2949fd;grid-column:1/-1;font-size:.85rem}body.playground-juice-js .juice-tween-lab__axis-control label{margin:0}body.playground-juice-js .juice-tween-lab__axis-control .juice-tween-lab__loop{cursor:pointer;grid-column:1/-1;justify-content:flex-start;gap:.45rem}body.playground-juice-js .juice-tween-lab__axis-control .juice-tween-lab__loop input{width:auto}body.playground-juice-js .juice-tween-lab__hint{margin:.8rem 0 0;font-size:.85rem}body.playground-juice-js .juice-tween-lab__actions{background:#fff;border-top:1px solid #e2e8f5;flex:none;gap:.75rem;padding:1rem clamp(2rem,5vw,4.5rem);display:flex;box-shadow:0 -10px 20px #ffffffeb}body.playground-juice-js .juice-tween-lab button{color:#fff;cursor:pointer;background:#2949fd;border:1px solid #2949fd;border-radius:.55rem;padding:.7rem 1rem;font-weight:700}body.playground-juice-js .juice-tween-lab button+button{color:#2949fd;background:#fff}body.playground-juice-js .juice-tween-lab__stage{background-image:radial-gradient(#c8d6f7 1px,#0000 1px);background-size:18px 18px;align-content:center;gap:1.5rem;min-height:0;padding:clamp(1.5rem,4vw,4rem);display:grid;overflow:auto}body.playground-juice-js .juice-tween-lab__example{background:#ffffffc7;border:1px solid #91a5d380;border-radius:1.25rem;gap:1rem;width:min(100%,760px);margin-inline:auto;padding:clamp(1.25rem,3vw,2rem);display:grid;box-shadow:0 16px 35px #1e3e8214}body.playground-juice-js .juice-tween-lab__example-heading,body.playground-juice-js .juice-tween-lab__readout,body.playground-juice-js .juice-tween-lab__axis-readout{justify-content:space-between;align-items:center;gap:1rem;display:flex}body.playground-juice-js .juice-tween-lab__readout,body.playground-juice-js .juice-tween-lab__axis-readout{color:#52606f;font-size:.85rem}body.playground-juice-js .juice-tween-lab__readout strong,body.playground-juice-js .juice-tween-lab__axis-readout strong{color:#172554;font-size:1.15rem;display:block}body.playground-juice-js .juice-tween-lab__axis-readout{text-align:center;gap:.85rem}body.playground-juice-js .juice-tween-lab__speed-chart{background:#f5f8ff;border:1px solid #cbd7f2;border-radius:.8rem;height:150px;position:relative;overflow:hidden}body.playground-juice-js .juice-tween-lab__speed-chart svg{width:100%;height:100%;display:block}body.playground-juice-js .juice-tween-lab__chart-grid{fill:none;stroke:#cad5eb;stroke-width:1px;vector-effect:non-scaling-stroke}body.playground-juice-js .juice-tween-lab__speed-curve{fill:none;stroke:#2949fd;stroke-width:3px;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}body.playground-juice-js .juice-tween-lab__speed-marker{fill:#fff;stroke:#2949fd;stroke-width:3px;vector-effect:non-scaling-stroke}body.playground-juice-js .juice-tween-lab__speed-chart span{color:#52606f;letter-spacing:.06em;text-transform:uppercase;font-size:.68rem;font-weight:700;position:absolute}body.playground-juice-js .juice-tween-lab__speed-chart span:first-of-type{top:.55rem;left:.65rem}body.playground-juice-js .juice-tween-lab__speed-chart span:last-of-type{bottom:.45rem;right:.65rem}body.playground-juice-js .juice-tween-lab__movement-preview{color:#52606f;letter-spacing:.06em;text-transform:uppercase;gap:.65rem;font-size:.78rem;font-weight:700;display:grid}body.playground-juice-js .juice-tween-lab__track{background:#cbd7f2;border-radius:999px;width:calc(100% - 68px);height:18px;position:relative}body.playground-juice-js .juice-tween-lab__orb,body.playground-juice-js .juice-tween-lab__axis-orb{background:radial-gradient(circle at 30% 28%,#b7c7ff,#2949fd 56%,#172554);border-radius:50%;width:68px;height:68px;position:absolute;box-shadow:0 14px 28px #2949fd59}body.playground-juice-js .juice-tween-lab__orb{top:50%;left:0;transform:translateY(-50%)}body.playground-juice-js .juice-tween-lab__space{perspective:600px;background-color:#e8efff;background-image:linear-gradient(135deg,#cbd7f2b8 1px,#0000 1px),none;background-position:0 0,0 0;background-repeat:repeat,repeat;background-size:18px 18px;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box;border:1px solid #cbd7f2;border-radius:.8rem;height:180px;position:relative;overflow:hidden}body.playground-juice-js .juice-tween-lab__axis-orb{will-change:transform;bottom:18%;left:9%}body.playground-juice-js .juice-tween-lab pre{color:#dce6ff;background:#101a36;border-radius:.8rem;margin:0;padding:1.1rem;font-size:.76rem;line-height:1.6;overflow:auto}@media (width<=760px){body.playground-juice-js .juice-tween-lab{grid-template-columns:1fr;height:auto}body.playground-juice-js .juice-tween-lab__controls{display:block}body.playground-juice-js .juice-tween-lab__control-scroll{overflow:visible}body.playground-juice-js .juice-tween-lab__actions{z-index:2;position:sticky;bottom:0}body.playground-juice-js .juice-tween-lab__stage{min-height:0;overflow:visible}}