/* Ryan Short / V3.6 / optional Motion Lab studies.
 * This file affects only Built to Play. Remove it and restore the original index
 * from rollback/ to return to V3.5.1. No GSAP dependency and no Canvas rendering. */
.playground__text{min-width:0}
.lab__tabs{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 22px;width:100%}
.lab__tab{appearance:none;cursor:pointer;border:1px solid #3c4b61;border-radius:6px;background:#0e1725;color:#c5d2e5;padding:11px 13px;min-width:0;text-align:left;white-space:nowrap;font:700 11px/1.2 var(--body);transition:background-color .2s,border-color .2s,color .2s}
.lab__tab>span{font-weight:700;color:#739bb7;margin-right:5px}
.lab__tab:hover{border-color:#5fa6da;color:#fff;background:#17273c}
.lab__tab.is-active,.lab__tab[aria-selected="true"]{border-color:var(--cyan);color:#041119;background:var(--cyan)}
.lab__tab.is-active>span{color:#164c65}
.lab__tab:focus-visible{outline:2px solid #effaff;outline-offset:3px}
.lab__field{isolation:isolate;overflow:hidden}
.lab__panel{position:absolute;inset:0;overflow:hidden}
.lab__panel[hidden]{display:none!important}
.lab__panel:focus-visible{outline:2px solid var(--cyan);outline-offset:-7px}
.lab__panel .playground__label{z-index:6}
.lab__corner-note{position:absolute;left:23px;top:24px;color:#7d9cb7;font:700 9px/1.4 var(--body);letter-spacing:.14em;z-index:5}
.lab__panel--orbit{background:radial-gradient(ellipse at 50% 52%,#153459 0%,#0a172b 47%,#07101c 88%)}
.lab__orbit-haze{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,#2762bc18,transparent 52%)}
.lab__orbit-ring{position:absolute;left:50%;top:50%;width:min(81%,540px);height:42%;transform:translate(-50%,-50%) rotate(-27deg);border:1px solid #62d9fe44;border-radius:50%;pointer-events:none}
.lab__orbit-ring--two{width:min(61%,410px);height:62%;transform:translate(-50%,-50%) rotate(42deg);border-color:#397bff68}
.lab__orbit-ring--three{width:min(42%,300px);height:37%;transform:translate(-50%,-50%) rotate(72deg);border-style:dashed;border-color:#90bfff50}
.lab__orbit-core{position:absolute;left:50%;top:50%;width:67px;height:67px;transform:translate(-50%,-50%);border-radius:50%;border:1px solid #a4e7ff7c;background:radial-gradient(circle at 38% 29%,#b4f7ff 0%,#6ab7e9 22%,#1d559e 49%,#0c1d36 76%,#06111c);box-shadow:0 0 0 12px #4be7ff09,0 0 35px #3178b042}
.lab__orbit-core span{position:absolute;inset:10px;border-radius:50%;border:1px solid #d9faff26}
.lab__orbit-body{position:absolute;left:50%;top:50%;width:15px;height:15px;border-radius:50%;transform:translate(-50%,-50%);will-change:auto;background:radial-gradient(circle at 32% 26%,#f5ffff,#55dfff 47%,#195fa6 78%,#0d2c55);box-shadow:0 0 16px #4be7ff6b}
.lab__orbit-body--two{width:22px;height:22px;background:radial-gradient(circle at 30% 30%,#e0f6ff,#74a9ff 45%,#264f9e 78%,#102248);box-shadow:0 0 18px #4889ee53}
.lab__orbit-body--three{width:9px;height:9px;background:#d2f9ff;box-shadow:0 0 11px #83faff78}
.lab__panel--waves{background:radial-gradient(ellipse at 52% 52%,#123c57 0%,#0b1b32 43%,#070f1e 95%)}
.lab__wave-grid{position:absolute;inset:0;background-image:linear-gradient(#5984b514 1px,transparent 1px),linear-gradient(90deg,#5984b514 1px,transparent 1px);background-size:38px 38px;mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
.lab__wave-svg{position:absolute;inset:7% 0;width:100%;height:86%;overflow:visible;pointer-events:none}
.lab__wave-svg path{fill:none;stroke-width:2.6;stroke-linecap:round;vector-effect:non-scaling-stroke}
.lab__wave-svg path:nth-of-type(2){stroke-width:1.6}
.lab__wave-svg path:nth-of-type(3){stroke-width:1.1}
.lab__wave-beacon{position:absolute;top:50%;left:50%;width:5px;height:5px;border-radius:50%;background:#c8ffff;box-shadow:0 0 0 5px #4be7ff15,0 0 17px #4be7ff83;transform:translate(-50%,-50%);pointer-events:none}
@media(max-width:760px){
 .lab__tabs{margin-bottom:20px}
 .lab__tab{flex:1;padding:11px 8px;text-align:center;font-size:10px}
 .lab__corner-note{font-size:8px;left:16px;top:16px}
 .lab__orbit-ring{width:88%;height:38%}
 .lab__orbit-ring--two{width:69%;height:63%}
}
@media(max-width:380px){.lab__tab{font-size:9px}.lab__tab>span{margin-right:2px}}
@media(prefers-reduced-motion:reduce){.lab__orbit-body,.lab__wave-beacon{transition:none!important;animation:none!important}}
html[data-motion-paused="true"] .lab__panel .playground__shape{animation-play-state:paused!important}

/* Respect local pause and offscreen state for the original morph study as well. */
.lab-is-paused .playground__shape{animation-play-state:paused!important}

/* Allow tapping the studies without stealing normal vertical page scrolling. */
.lab__field { touch-action: pan-y; }