/* Playground: a compact, touch-friendly studio for three original studies. */
.lab-page { --lab-line:#35313e; --lab-accent:#c8b8f1; --lab-soft:#aca5bb; padding:45px var(--site-gutter) 65px; background:#0c0b10; }
.lab-eyebrow { display:flex; justify-content:space-between; align-items:center; gap:16px; color:#a6a0b5; font-size:10px; line-height:1.6; letter-spacing:.08em; }
.lab-eyebrow>span:last-child { display:flex; align-items:center; gap:10px; }
.lab-eyebrow i,.lab-transport i { display:inline-block; width:6px; height:6px; background:#a1d4be; border-radius:50%; }
.lab-heading { display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:end; margin:38px 0 44px; }
.lab-page .lab-heading h1 { margin:0; font:400 clamp(54px,6.4vw,92px)/.99 var(--serif); letter-spacing:-.055em; }
.lab-heading h1 em { color:var(--lab-accent); font-weight:400; }
.lab-heading>div { padding:0 0 5px 12%; }
.lab-heading p { margin:0 0 23px; color:#bdb6cd; font-size:16px; line-height:1.7; max-width:33ch; }
.lab-heading .mono { font-size:10px; color:#8e879d; letter-spacing:.06em; }
.lab-studio { border:1px solid var(--lab-line); border-radius:23px; overflow:hidden; background:#100f15; }
.lab-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-bottom:1px solid var(--lab-line); background:#111016; }
.lab-tabs button { position:relative; padding:21px 25px; display:flex; align-items:center; gap:16px; min-height:80px; color:#9991aa; border-right:1px solid var(--lab-line); text-align:left; font-size:16px; transition:background .2s,color .2s; }
.lab-tabs button:last-child { border-right:0; }
.lab-tabs button[aria-selected="true"] { background:#221d30; color:#eee8fb; }
.lab-tabs button[aria-selected="true"]::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:linear-gradient(90deg,#8989ef,#81cfc6,#cf9dbb); }
.lab-tabs button:hover { color:#f0e9ff; background:#1d1926; }
.lab-tabs .mono { color:#8d819e; font-size:10px; }
.lab-tabs svg { width:34px; height:34px; margin-left:auto; stroke:currentColor; stroke-width:1; fill:none; }
.lab-tab-letter { margin-left:auto; font:italic 28px var(--serif); }
.lab-panel { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(280px,1fr); }
.lab-stage { position:relative; min-width:0; min-height:560px; overflow:hidden; background:#0b0d16; isolation:isolate; }
.form-stage { background:radial-gradient(ellipse at 40% 50%,#17283f 0%,#131323 46%,#0c0c13 80%); }
.lab-stage-top,.lab-stage-bottom { position:absolute; left:26px; right:26px; display:flex; align-items:center; justify-content:space-between; gap:15px; z-index:4; pointer-events:none; color:#aba4bc; font-size:9px; line-height:1.5; letter-spacing:.04em; }
.lab-stage-top { top:24px; }.lab-stage-bottom { bottom:22px; }
.lab-stage-top span:last-child { color:#80798e; white-space:nowrap; }
.lab-stage-bottom span:last-child { font-size:20px; color:#ccc3e0; }
.lab-stage canvas { display:block; position:absolute; inset:9% 0; width:100%; height:82%; z-index:2; outline-offset:-7px; }
.lab-stage #flow-canvas { inset:0; height:100%; touch-action:pan-y pinch-zoom; cursor:crosshair; }
.lab-orbit { position:absolute; width:72%; aspect-ratio:1; max-height:80%; border:1px solid #847ba425; border-radius:50%; left:50%; top:50%; transform:translate(-50%,-50%); }
.lab-orbit::after { content:""; position:absolute; inset:11%; border:1px solid #847ba41c; border-radius:50%; }
.lab-cross { position:absolute; color:#686b88; font:25px var(--mono); }.lab-cross-a { left:10%; top:18%; }.lab-cross-b { right:10%; bottom:18%; }
.lab-controls { border-left:1px solid var(--lab-line); padding:32px clamp(22px,3vw,42px); min-width:0; background:#131117; }
.lab-control-kicker { font-size:9px; letter-spacing:.06em; color:#8c819f; }
.lab-controls h2 { margin:19px 0 12px; font:400 45px/1.04 var(--serif); letter-spacing:-.045em; }
.lab-controls h2 em { color:var(--lab-accent); font-weight:400; }
.lab-controls>p { color:#aaa1b7; font-size:13px; line-height:1.7; max-width:30ch; margin:0 0 25px; }
.lab-palette { border:0; margin:0 0 21px; padding:0; min-width:0; }
.lab-palette legend,.lab-range,.lab-text-label { font-size:12px; color:#d8d0e5; width:100%; }
.lab-palette legend { margin:0 0 10px; padding:0; }
.lab-palette output,.lab-range output,.lab-text-label>span { float:right; font:10px/1.5 var(--mono); color:#9b8faf; }
.lab-swatches { display:flex; gap:8px; }
.lab-swatches button { display:grid; place-items:center; width:44px; height:44px; padding:5px; border:1px solid transparent; border-radius:50%; }
.lab-swatches button::after { content:""; display:block; width:28px; height:28px; border-radius:50%; background:radial-gradient(circle at 32% 24%,#ffffff9c,transparent 55%),var(--swatch); box-shadow:inset -3px -3px 6px #0003; }
.lab-swatches button[aria-pressed="true"] { border-color:#c5b7e1; }
.lab-range { display:block; margin-bottom:17px; }
.lab-range input { display:block; width:100%; height:44px; margin:4px 0 0; cursor:pointer; background:transparent; accent-color:var(--lab-accent); }
.lab-range input::-webkit-slider-runnable-track { height:3px; border-radius:3px; background:#514461; }
.lab-range input::-webkit-slider-thumb { margin-top:-6px; }
.lab-options { display:flex; gap:6px; flex-wrap:wrap; }
.lab-options button { border:1px solid #443a52; border-radius:8px; min-height:44px; padding:10px 13px; font-size:12px; color:#b7acc8; }
.lab-options button[aria-pressed="true"] { background:#30263f; border-color:#89749e; color:#f0e5ff; }
.lab-actions { display:flex; align-items:center; gap:16px; margin-top:24px; }
.lab-exploration { margin-top:22px; padding-top:18px; border-top:1px solid var(--lab-line); }
.lab-exploration h3 { margin:0 0 8px; font:400 10px/1.5 var(--mono); letter-spacing:.04em; color:#c8b8f1; }
.lab-exploration p { margin:0; font-size:12px; line-height:1.7; color:#aaa1b7; }
.lab-primary { flex:1; display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:47px; padding:11px 17px; background:#dad0ec; color:#231a30; border-radius:30px; font-size:12px; text-align:left; }
.lab-primary:hover { background:#f0e9fd; }.lab-primary>span { font-size:23px; }
.lab-reset { min-width:44px; min-height:44px; padding:10px 0; font-size:12px; color:#b6a9c8; text-decoration:underline; text-underline-offset:4px; }
.lab-controls button:disabled,.lab-controls input:disabled { opacity:.45; cursor:default; }
.lab-transport { border-top:1px solid var(--lab-line); display:flex; align-items:center; justify-content:space-between; gap:16px; padding:8px 26px; min-height:59px; background:#100e15; }
.lab-transport>.mono { display:flex; align-items:center; gap:9px; color:#93889f; font-size:9px; letter-spacing:.07em; }
.lab-transport button { display:flex; gap:17px; align-items:center; min-height:44px; color:#c5b8da; font-size:12px; padding:8px 0 8px 12px; }
.lab-transport button>span { width:15px; font-size:18px; }.motion-paused .lab-transport i { background:#8e819f; }
.lab-note { display:grid; grid-template-columns:1fr 1fr auto; gap:30px; padding:33px 0 0; align-items:center; }
.lab-note>.mono { color:#847b94; font-size:9px; line-height:1.7; max-width:23ch; }
.lab-note p { color:#9d94ae; font-size:12px; line-height:1.8; margin:0; }
.lab-note a { color:#c1b1d8; display:flex; align-items:center; gap:20px; font-size:12px; min-height:44px; }.lab-note a .icon { width:16px; height:16px; }
.lab-form-fallback { position:absolute; inset:15% 12%; text-align:center; color:#88a8ef; }.lab-form-fallback svg { height:80%; width:100%; }.lab-form-fallback p { font-size:12px; line-height:1.6; color:#d2c6e3; }
.lab-text-label { display:block; margin-bottom:23px; }.lab-text-label input { display:block; width:100%; background:#1d1826; border:1px solid #4c405b; border-radius:8px; color:#eee6fc; font-size:16px; padding:12px 13px; margin-top:10px; }
.lab-page :is(input,canvas):focus-visible { outline:2px solid #c4b0ef; outline-offset:4px; }.lab-stage canvas:focus-visible { outline-offset:-7px; }
.lab-tabs button:focus-visible { outline-offset:-6px; }
.type-stage { display:grid; place-items:center; background:radial-gradient(ellipse at 50% 90%,#30224999,transparent 65%),#12101b; container-type:inline-size; }
.lab-type-display { width:90%; text-align:center; font:400 20cqw/.95 var(--serif); letter-spacing:-.06em; color:#c4b1e4; position:relative; z-index:2; white-space:nowrap; --expression:1; --lift:18px; --stretch:1.2; --echo:12px; --echo2:24px; }
.lab-type-display>span { display:inline-block; transform-origin:50% 80%; animation:lab-wave 2.8s ease-in-out infinite; animation-delay:calc(var(--i,0) * -.16s); }
.type-stage[data-style="stretch"] .lab-type-display>span { animation-name:lab-stretch; animation-duration:2.4s; }
.type-stage[data-style="echo"] .lab-type-display>span { animation-name:lab-echo; animation-duration:3.8s; }
.lab-type-orbit { position:absolute; width:78%; aspect-ratio:1; border:1px solid #6750804d; border-radius:50%; transform:rotateX(60deg) rotateZ(-15deg); }
.lab-type-orbit::before,.lab-type-orbit::after { content:""; position:absolute; inset:14%; border:1px solid #6750804d; border-radius:50%; }.lab-type-orbit::after { inset:-16%; border-color:#67508026; }
.motion-paused .lab-type-display>span { animation-play-state:paused; }
.lab-no-script { padding:20px; font-size:14px; }
@keyframes lab-wave { 0%,100% { transform:translateY(calc(var(--lift) * -.6)) rotate(-5deg); } 50% { transform:translateY(var(--lift)) rotate(5deg); } }
@keyframes lab-stretch { 0%,100% { transform:scaleY(1); } 50% { transform:scaleY(var(--stretch)) translateY(-5px); } }
@keyframes lab-echo { 0%,100% { text-shadow:var(--echo) var(--echo) #826b9c66,var(--echo2) var(--echo2) #826b9c22; } 50% { text-shadow:calc(var(--echo) * -1) calc(var(--echo) * -1) #77b7bb66,calc(var(--echo2) * -1) calc(var(--echo2) * -1) #77b7bb22; } }
@media(min-width:1550px) { .lab-stage { min-height:620px; } }
@media(max-width:1000px) { .lab-panel { grid-template-columns:minmax(0,1.3fr) minmax(260px,1fr); }.lab-heading>div { padding-left:0; }.lab-tabs button { padding:18px; gap:12px; }.lab-controls { padding:28px 24px; }.lab-tabs svg { width:27px; height:27px; }.lab-note { grid-template-columns:1fr 1fr; }.lab-note a { grid-column:2; } }
@media(max-width:760px) {
 .lab-page { padding:28px 6% 40px; }.lab-eyebrow { font-size:8px; }.lab-eyebrow>span:last-child { font-size:7px; gap:5px; }.lab-eyebrow i { width:4px; height:4px; }
 .lab-heading { display:block; margin:25px 0 27px; }.lab-page .lab-heading h1 { font-size:clamp(49px,12.4vw,82px); line-height:1; }.lab-heading>div { margin-top:19px; padding:0; }.lab-heading p { font-size:14px; line-height:1.7; margin-bottom:0; max-width:35ch; }.lab-heading>div>.mono { display:none; }
 .lab-studio { border-radius:17px; }.lab-tabs button { min-height:73px; padding:13px 12px; gap:5px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; font-size:12px; }.lab-tabs button>.mono { font-size:8px; }.lab-tabs svg,.lab-tab-letter { display:none; }
 .lab-panel { display:block; }.lab-stage { min-height:0; height:clamp(300px,90vw,480px); }.lab-stage-top,.lab-stage-bottom { left:18px; right:18px; font-size:9px; gap:8px; }.lab-stage-top { top:18px; }.lab-stage-bottom { bottom:16px; }.lab-stage-bottom span:last-child { font-size:16px; }
 .lab-controls { border-left:0; border-top:1px solid var(--lab-line); padding:23px 20px; }.lab-controls h2 { font-size:31px; margin:0 0 10px; }.lab-controls h2 br { display:none; }.lab-controls h2 br::after { content:' '; }.lab-control-kicker { display:none; }.lab-controls>p { font-size:13px; max-width:none; margin:0 0 21px; }.lab-palette { margin-bottom:18px; }.lab-range { margin-bottom:14px; }.lab-actions { margin-top:20px; }.lab-options { gap:7px; }.lab-options button { flex:1; }
 .lab-transport { padding:7px 18px; min-height:58px; }.lab-transport>.mono { font-size:8px; }.lab-transport button { font-size:11px; }.lab-note { gap:13px; padding-top:25px; }.lab-note>.mono { font-size:8px; }.lab-note p { font-size:11px; }.lab-note a { grid-column:1/-1; margin-top:4px; font-size:12px; }
}
@media(max-width:360px) { .lab-eyebrow>span:last-child { display:none; }.lab-controls { padding:21px 16px; }.lab-stage-top span:last-child { display:none; }.lab-tabs button { padding:12px 9px; }.lab-page .lab-heading h1 { font-size:12.4vw; } }
@media(prefers-reduced-motion:reduce) { .lab-type-display>span { animation:none!important; transform:none!important; }.lab-tabs button { transition:none; } }
.lab-type-display.type-still>span { animation:none; transform:none; text-shadow:none; }
.lab-canvas-error { position:absolute; inset:40% 10%; text-align:center; font-size:14px; line-height:1.7; color:#d2c6e3; }