:root{--ripple-background:#101820;color:#f7f4e9;background:var(--ripple-background);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}html,body{width:100%;height:100%;overflow:hidden}.experience{background:var(--ripple-background);width:100vw;height:100vh;margin:0;padding:clamp(6rem,12vh,9rem) clamp(1rem,4vw,4rem) clamp(5rem,10vh,7rem);transition:background-color .3s;position:relative}.grid{grid-template-columns:repeat(12,1fr);gap:clamp(.3rem,.8vw,.8rem);width:100%;height:100%;display:grid}.tile{border-radius:12%;min-width:0;min-height:0;transition:background-color .3s,transform 90ms linear,border-radius 90ms linear}.caption{text-transform:uppercase;align-items:baseline;gap:1rem;display:flex;position:absolute;inset-block-end:clamp(1rem,3vw,2rem);inset-inline-start:clamp(1.25rem,4vw,4rem)}.caption h1,.caption p{margin:0}.caption h1{letter-spacing:-.04em;font-size:clamp(1.4rem,3vw,2.6rem)}.caption p{font:700 .68rem/1 var(--web-shell-mono);letter-spacing:.1em}.palette-control{color:inherit;font:700 .7rem/1 var(--web-shell-sans);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;background:#1018209e;border:1px solid;border-radius:999px;padding:.8rem 1rem;position:absolute;inset-block-end:clamp(1rem,3vw,2rem);inset-inline-end:clamp(1rem,3vw,2rem)}@media (width<=42rem){.grid{grid-template-columns:repeat(8,1fr)}.caption p{display:none}}@media (prefers-reduced-motion:reduce){.tile{transition:none}}
