.liquid-ether-container{touch-action:none;width:100%;height:100%;position:relative;overflow:hidden}
.focus-container{flex-wrap:wrap;justify-content:center;align-items:center;gap:1em;display:flex;position:relative}.focus-word{cursor:pointer;font-size:2.2rem;font-weight:900;transition:filter .3s,color .3s;position:relative}@media (max-width:640px){.focus-word{white-space:nowrap;letter-spacing:-.01em;font-size:1.35rem}.focus-container{flex-wrap:nowrap;justify-content:center;gap:.5em;padding-inline:12px;overflow:visible}.corner{border-width:2px;width:.6rem;height:.6rem}.top-left{top:-4px;left:-4px}.top-right{top:-4px;right:-4px}.bottom-left{bottom:-4px;left:-4px}.bottom-right{bottom:-4px;right:-4px}}.focus-word.active{filter:blur()}.focus-frame{pointer-events:none;box-sizing:content-box;border:none;position:absolute;top:0;left:0}.corner{border:2px solid var(--border-color,#fff);width:.75rem;height:.75rem;filter:drop-shadow(0px 0px 3px var(--border-color,#fff));border-radius:2px;transition:none;position:absolute}.top-left{border-bottom:none;border-right:none;top:-6px;left:-6px}.top-right{border-bottom:none;border-left:none;top:-6px;right:-6px}.bottom-left{border-top:none;border-right:none;bottom:-6px;left:-6px}.bottom-right{border-top:none;border-left:none;bottom:-6px;right:-6px}
.chroma-grid{grid-template-columns:repeat(var(--cols,3),320px);box-sizing:border-box;--x:50%;--y:50%;--r:220px;grid-auto-rows:auto;justify-content:center;gap:.75rem;width:100%;max-width:1200px;height:100%;margin:0 auto;padding:1rem;display:grid;position:relative}@media (max-width:1124px){.chroma-grid{grid-template-columns:repeat(auto-fit,minmax(320px,320px));gap:.5rem;padding:.5rem}}@media (max-width:640px){.chroma-grid{scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;overscroll-behavior-x:contain;padding:0;grid-template-columns:none;grid-auto-columns:100%;grid-auto-flow:column;justify-content:flex-start;gap:0;padding-inline:0;scroll-padding-inline:0;overflow-x:auto}.chroma-grid::-webkit-scrollbar{width:0;height:0;display:none}.chroma-grid{-ms-overflow-style:none;scrollbar-width:none}.chroma-card{scroll-snap-align:start;width:100%;margin-inline:0}.chroma-img-wrapper{padding:12px}.chroma-info{grid-template-columns:1fr;row-gap:.4rem}.chroma-info .location{justify-self:start}.chroma-info .rating{letter-spacing:1.5px}.chroma-overlay,.chroma-fade{display:none}}.chroma-card{background:var(--card-gradient);--mouse-x:50%;--mouse-y:50%;--spotlight-color:#ffffff4d;border:1px solid #333;border-radius:20px;flex-direction:column;width:320px;height:auto;transition:border-color .3s;display:flex;position:relative;overflow:hidden}.chroma-card:hover{border-color:var(--card-border)}.chroma-card:before{content:"";background:radial-gradient(circle at var(--mouse-x)var(--mouse-y),var(--spotlight-color),transparent 70%);pointer-events:none;opacity:0;z-index:2;transition:opacity .5s;position:absolute;inset:0}.chroma-card:hover:before{opacity:1}.chroma-img-wrapper{z-index:1;box-sizing:border-box;background:0 0;flex:1;padding:10px;transition:background .3s;position:relative}.chroma-img-wrapper img{object-fit:cover;border-radius:10px;width:100%;height:100%;display:block}.chroma-card.fade-in .chroma-img-wrapper,.chroma-card.fade-in .chroma-info{animation:1.6s ease-in-out both cardFade}@keyframes cardFade{0%{opacity:0}to{opacity:1}}.chroma-info{z-index:1;color:#fff;grid-template-columns:1fr auto;gap:.25rem .75rem;padding:.75rem 1rem;font-family:system-ui,sans-serif;display:grid;position:relative}.chroma-info .role,.chroma-info .handle{color:#aaa}.chroma-info .rating{color:#f5c518;letter-spacing:2px;grid-column:1/2;font-size:.95rem}.chroma-info .location{color:#aaa;grid-column:2/3;justify-self:end}.chroma-overlay{pointer-events:none;z-index:3;-webkit-backdrop-filter:grayscale()brightness(.78);-webkit-mask-image:radial-gradient(circle var(--r)at var(--x)var(--y),transparent 0%,transparent 15%,#0000001a 30%,#00000038 45%,#00000059 60%,#00000080 75%,#000000ad 88%,white 100%);mask-image:radial-gradient(circle var(--r)at var(--x)var(--y),transparent 0%,transparent 15%,#0000001a 30%,#00000038 45%,#00000059 60%,#00000080 75%,#000000ad 88%,white 100%);-webkit-mask-image:radial-gradient(circle var(--r)at var(--x)var(--y),transparent 0%,transparent 15%,#0000001a 30%,#00000038 45%,#00000059 60%,#00000080 75%,#000000ad 88%,white 100%);background:0 0;position:absolute;inset:0}.chroma-fade{pointer-events:none;z-index:4;-webkit-backdrop-filter:grayscale()brightness(.78);-webkit-mask-image:radial-gradient(circle var(--r)at var(--x)var(--y),white 0%,white 15%,#ffffffe6 30%,#ffffffc7 45%,#ffffffa6 60%,#ffffff80 75%,#ffffff52 88%,transparent 100%);mask-image:radial-gradient(circle var(--r)at var(--x)var(--y),white 0%,white 15%,#ffffffe6 30%,#ffffffc7 45%,#ffffffa6 60%,#ffffff80 75%,#ffffff52 88%,transparent 100%);-webkit-mask-image:radial-gradient(circle var(--r)at var(--x)var(--y),white 0%,white 15%,#ffffffe6 30%,#ffffffc7 45%,#ffffffa6 60%,#ffffff80 75%,#ffffff52 88%,transparent 100%);opacity:1;background:0 0;transition:opacity .25s;position:absolute;inset:0}.chroma-controls{display:none}@media (max-width:640px){.chroma-controls{justify-content:center;align-items:center;gap:.75rem;margin-top:.5rem;padding-inline:1rem;display:flex}.chroma-controls .ctrl-btn{color:#fff;cursor:pointer;background:#ffffff14;border:1px solid #ffffff2e;border-radius:999px;justify-content:center;align-items:center;width:32px;height:32px;display:flex}.chroma-controls .ctrl-btn:hover{background:#ffffff29}.chroma-controls .dots{gap:.4rem;display:flex}.chroma-controls .dot{opacity:.6;cursor:pointer;background:#777;border:none;border-radius:999px;width:8px;height:8px;padding:0}.chroma-controls .dot.active{opacity:1;background:#fff}}
