@font-face{font-family:Exyo Lab Display;src:url('/assets/fonts/Anton-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
html:has(>body.labs-page),body.labs-page{background:#000;overflow:hidden;height:100%;color:#f2f2f2;--exyo-accent:#eee}
.labs-page main.labs-workspace{position:fixed;inset:0;display:block;width:100%;height:100%;min-height:0;background:#000;overflow:hidden;isolation:isolate;transform:none}
.archive-stage{position:absolute;inset:0;z-index:0;touch-action:none;cursor:grab;outline-offset:-8px}
.archive-stage.is-dragging{cursor:grabbing}
.archive-stage.is-hovering{cursor:pointer}
.archive-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.2s;touch-action:none}
.is-archive-ready .archive-canvas{opacity:1}
.archive-tracker{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.archive-chrome{position:absolute;inset:0;z-index:3;pointer-events:none;padding:24px;font:14px/20px 'DM Sans',Arial,sans-serif;letter-spacing:-.2px;opacity:0;mix-blend-mode:difference;transition:opacity 1.2s .3s}
.is-archive-ready .archive-chrome,.is-archive-fallback .archive-chrome{opacity:1}
.archive-chrome a,.archive-chrome button{pointer-events:auto;color:inherit}
.archive-brand{position:absolute;top:24px;left:24px;display:flex;align-items:center;gap:13px;color:#eee;text-decoration:none}
.archive-brand img{display:block;width:84px;height:30px;object-fit:contain}
.archive-brand span{font-size:10px;letter-spacing:.12em;padding-top:3px;color:#aaa}
.archive-contact{position:absolute;right:24px;top:24px;display:flex;gap:20px;align-items:center}
.archive-contact a,.archive-index-toggle{color:inherit;text-decoration:none;background:none;border:0;padding:0;font:inherit;letter-spacing:inherit;cursor:pointer;position:relative}
.archive-contact a:after,.archive-index-toggle:after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s cubic-bezier(.19,1,.22,1)}
.archive-contact a:hover:after,.archive-index-toggle:hover:after,.archive-index-toggle[aria-expanded=true]:after{transform:scaleX(1);transform-origin:left}
.archive-copy{position:absolute;left:24px;bottom:24px;max-width:400px;margin:0;font:14px/20px 'DM Sans',Arial,sans-serif;color:#eee;letter-spacing:-.2px;text-wrap:balance;pointer-events:none;text-shadow:0 1px 8px #000}
.archive-copy>span{color:#aaa}
.archive-transport{position:absolute;bottom:20px;right:20px;display:flex;align-items:center;gap:13px;pointer-events:auto}
.archive-transport button{background:none;color:#eee;border:0;padding:6px;width:29px;height:29px;cursor:pointer;font:16px 'DM Sans',sans-serif}
.archive-sound{display:flex;align-items:center;justify-content:center}
.archive-sound>span{display:flex;height:12px;gap:2px;align-items:flex-end}
.archive-sound i{width:2px;height:12px;background:#eee;transform:scaleY(.2);transform-origin:bottom;transition:transform .4s}
.archive-sound[aria-pressed=true] i{animation:archiveSound .9s ease-in-out infinite alternate}
.archive-sound[aria-pressed=true] i:nth-child(2){animation-delay:-.45s}.archive-sound[aria-pressed=true] i:nth-child(3){animation-delay:-.2s}.archive-sound[aria-pressed=true] i:nth-child(4){animation-delay:-.7s}
@keyframes archiveSound{from{transform:scaleY(.2)}to{transform:scaleY(1)}}
.archive-index{position:absolute;left:24px;top:50%;width:min(380px,calc(100% - 48px));padding:22px 0;transform:translateY(-50%);z-index:4;background:linear-gradient(90deg,#000b,#0000);font:14px/22px 'DM Sans',Arial,sans-serif;letter-spacing:-.2px}
.archive-index[hidden]{display:none}
.archive-index-heading{font-size:9px;letter-spacing:.12em;color:#777;margin:0 0 20px}
.archive-index ol{list-style:none;margin:0;padding:0}
.archive-index button[data-open-lab]{position:relative;text-align:left;background:none;border:0;color:#888;font:inherit;cursor:pointer;padding:5px 0;transition:color .35s;max-width:100%}
.archive-index button[data-open-lab]>span{color:#666}
.archive-index button[data-open-lab]:hover,.archive-index button[data-open-lab]:focus-visible,.archive-index button[data-open-lab][aria-current=true]{color:#fff}
.archive-index button[data-open-lab][aria-current=true]>span{color:#aaa}
.archive-index button[data-open-lab]:after{content:'';position:absolute;left:0;bottom:3px;width:100%;height:1px;background:#eee;transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.19,1,.22,1)}
.archive-index button[data-open-lab]:hover:after,.archive-index button[data-open-lab]:focus-visible:after{transform:scaleX(1)}
.archive-index-actions{display:flex;gap:20px;align-items:center;margin-top:23px}
.archive-index-actions button{font:9px 'DM Sans',sans-serif;letter-spacing:.04em;border:0;background:none;color:#777;cursor:pointer;padding:6px 0}
.archive-index-actions button:hover{color:#eee}
.archive-loading{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:11px 'DM Sans',sans-serif;letter-spacing:.08em;color:#777;z-index:1;transition:opacity .4s;pointer-events:none}
.is-archive-ready .archive-loading{opacity:0}
.archive-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.is-archive-fallback .archive-index{display:block;background:none}
.is-archive-fallback .archive-loading{top:26%;left:24px;transform:none}
.is-archive-fallback .archive-transport{display:none}
/* The experiments remain native, keyboard accessible and independent of the 3D renderer. */
.lab-player{position:fixed;inset:114px 3% 20px;width:auto;height:auto;margin:0;max-width:none;max-height:none;z-index:9000;border:1px solid #ffffff35;background:#080808;color:#eee;padding:24px 30px;box-shadow:0 20px 100px #000;overflow:hidden;flex-direction:column}
.lab-player[open]{display:flex}
.lab-player>header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-shrink:0}
.lab-kicker{font:8px 'DM Sans',sans-serif;letter-spacing:.12em;color:#888}
.lab-player h2{font:400 38px 'DM Sans',sans-serif;letter-spacing:-.05em;margin:8px 0 0}
.lab-close{width:40px;height:40px;border:1px solid #ffffff35;background:none;color:#eee;font-size:26px;cursor:pointer}
.lab-demo-stage{position:relative;flex:1;min-height:0;margin:20px 0;overflow:hidden;background:#0c0c0c;border:1px solid #ffffff12}
.lab-demo{display:block;width:100%;height:100%;touch-action:none}
.lab-settings{flex-shrink:0;border-top:1px solid #ffffff20;padding-top:15px}
.lab-description{font:11px/1.6 'DM Sans',sans-serif;color:#aaa;margin:0 0 15px}
.lab-inputs{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap}
.lab-inputs label{display:flex;flex-direction:column;gap:8px;font:7px 'DM Sans',sans-serif;letter-spacing:.1em;color:#888}
.lab-inputs input:not([type=range]){border:1px solid #ffffff25;background:#111;color:#eee;padding:10px;font:13px 'DM Sans',sans-serif;max-width:170px}
.lab-inputs input[type=range]{width:155px;accent-color:#ddd}
.lab-inputs button{min-height:36px;background:#111;color:#ddd;border:1px solid #ffffff25;padding:9px 14px;font:8px 'DM Sans',sans-serif;cursor:pointer}
.lab-inputs button:hover,.lab-inputs button[aria-pressed=true]{background:#eee;color:#080808}
.lab-inputs [hidden]{display:none!important}
@media(max-width:767px){
 .archive-chrome{padding:16px;font-size:13px}
 .archive-brand{top:110px;left:16px;gap:10px}.archive-brand img{width:60px;height:23px}.archive-brand span{font-size:8px}
 .archive-contact{top:113px;right:16px;font-size:11px}.archive-contact>a{display:none}
 .archive-copy{left:16px;bottom:20px;max-width:calc(100% - 95px);font-size:11px;line-height:16px}
 .archive-copy>span{display:none}
 .archive-transport{right:12px;bottom:16px;gap:5px}
 .archive-index{left:16px;width:calc(100% - 32px);background:linear-gradient(90deg,#000c,#0002);padding:20px 0;font-size:13px;top:48%}
 .archive-index button[data-open-lab]{padding:8px 0}
 .archive-index-heading{margin-bottom:15px;font-size:8px}
 .archive-index-actions{margin-top:17px}
 .archive-loading{font-size:9px;white-space:nowrap}
 .lab-player{inset:96px 3% 12px;padding:16px}
 .lab-player h2{font-size:28px}.lab-kicker{font-size:7px}.lab-close{width:35px;height:35px}
 .lab-demo-stage{margin:14px 0}.lab-description{font-size:9px;line-height:1.6}
 .lab-inputs{gap:12px}.lab-inputs label{font-size:5px}.lab-inputs input[type=range]{width:110px}.lab-inputs input:not([type=range]){max-width:125px;font-size:12px}.lab-inputs button{font-size:6px;padding:10px}
}
@media(max-width:360px){.archive-copy{font-size:10px;line-height:15px}.archive-index{font-size:12px}.archive-index button[data-open-lab]{padding:6px 0}.lab-inputs{gap:8px}.lab-inputs input[type=range]{width:90px}}
@media(prefers-reduced-motion:reduce){.archive-canvas,.archive-chrome{transition:none}.archive-sound[aria-pressed=true] i{animation:none;transform:scaleY(.7)}}
