.woj-shader-picker{position:fixed;inset:0;z-index:200;display:flex;align-items:flex-end;justify-content:center;padding-bottom:clamp(24px,5vh,48px);padding-inline:16px;background:#080a1073;backdrop-filter:blur(4px) saturate(110%);-webkit-backdrop-filter:blur(4px) saturate(110%);animation:woj-spicker-fadein .14s ease both}@keyframes woj-spicker-fadein{0%{opacity:0}to{opacity:1}}.woj-shader-picker__inner{width:100%;max-width:920px;background:#0c0e14d1;backdrop-filter:blur(28px) saturate(120%);-webkit-backdrop-filter:blur(28px) saturate(120%);border:1px solid rgba(214,205,184,.12);border-radius:14px;box-shadow:0 1px #ffffff0a inset,0 32px 64px -16px #000000bf;padding:20px;animation:woj-spicker-slidein .18s cubic-bezier(.22,1,.36,1) both}@keyframes woj-spicker-slidein{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.woj-shader-picker__header{display:flex;align-items:center;gap:var(--space-250, 10px);margin-bottom:16px}.woj-shader-picker__title{font-family:var(--ff-sans, "Inter", system-ui, sans-serif);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:#d6cdb88c}.woj-shader-picker__kbd{font-family:var(--ff-mono, "JetBrains Mono", monospace);font-size:10px;letter-spacing:.04em;color:#d6cdb859;background:#d6cdb80f;border:1px solid rgba(214,205,184,.1);border-radius:4px;padding:2px 6px;margin-left:2px}.woj-shader-picker__close{margin-left:auto;display:flex;align-items:center;justify-content:center;width:26px;height:26px;background:transparent;border:1px solid rgba(214,205,184,.1);border-radius:6px;color:#d6cdb873;cursor:pointer;transition:background .15s,color .15s,border-color .15s}.woj-shader-picker__close:hover{background:#d6cdb814;color:#d6cdb8cc;border-color:#d6cdb82e}.woj-shader-picker__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-250, 10px)}@media(max-width:640px){.woj-shader-picker__grid{grid-template-columns:repeat(2,1fr)}}.woj-shader-picker__tile{position:relative;display:flex;flex-direction:column;align-items:stretch;border:1.5px solid rgba(214,205,184,.08);border-radius:9px;overflow:hidden;background:#080a1080;cursor:pointer;padding:0;transition:transform .18s cubic-bezier(.22,1,.36,1),border-color .18s,box-shadow .18s;outline-offset:2px}.woj-shader-picker__tile:hover{transform:scale(1.02);border-color:#8a6a3a66}.woj-shader-picker__tile.is-active{border-color:#8a6a3ae6;box-shadow:0 0 0 1px #8a6a3a66,0 0 18px #8a6a3a40;transform:scale(1.04)}.woj-shader-picker__tile-canvas{display:block;width:100%;aspect-ratio:160 / 100;pointer-events:none;border-radius:0}.woj-shader-picker__tile-info{display:flex;flex-direction:column;gap:2px;padding:7px 9px 8px;background:#080a10b3;border-top:1px solid rgba(214,205,184,.06)}.woj-shader-picker__tile-label{display:block;font-family:var(--ff-sans, "Inter", system-ui, sans-serif);font-size:10px;font-weight:500;letter-spacing:.04em;color:#d6cdb8d9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.woj-shader-picker__tile-desc{display:block;font-family:var(--ff-sans, "Inter", system-ui, sans-serif);font-size:9px;letter-spacing:.02em;color:#d6cdb866;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.woj-shader-picker__tile.is-active .woj-shader-picker__tile-label{color:#d2ac64f2}.woj-shader-picker-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;background:transparent;border:1px solid rgba(214,205,184,.1);border-radius:6px;color:#d6cdb873;cursor:pointer;transition:background .15s,color .15s,border-color .15s;flex-shrink:0}.woj-shader-picker-btn:hover{background:#d6cdb812;color:#d6cdb8cc;border-color:#d6cdb82e}@media(prefers-reduced-motion:reduce){.woj-shader-picker,.woj-shader-picker__inner{animation:none}.woj-shader-picker__tile,.woj-shader-picker__tile:hover,.woj-shader-picker__tile.is-active{transform:none;transition:border-color .15s,box-shadow .15s}}.woj-shader-picker__tile-canvas{aspect-ratio:200 / 120;min-height:120px}@media(max-width:768px)and (min-width:641px){.woj-shader-picker__tile-canvas{aspect-ratio:160 / 100;min-height:100px}}@media(max-width:640px){.woj-shader-picker__tile-canvas{aspect-ratio:140 / 80;min-height:80px}}@media(max-width:768px){.woj-shader-picker__grid{grid-template-columns:repeat(2,1fr)}.woj-shader-picker__inner{max-width:520px}}.woj-shader-picker__tile{transition:transform .22s cubic-bezier(.16,1,.3,1),border-color .22s cubic-bezier(.16,1,.3,1),box-shadow .22s cubic-bezier(.16,1,.3,1)}.woj-shader-picker__tile:hover{transform:translateY(-3px) scale(1.02);border-color:#8a6a3a73;box-shadow:0 12px 32px color-mix(in oklch,oklch(2% 0 0) 50%,transparent)}.woj-shader-picker__tile.is-active{border:2px solid var(--c-brand-accent, oklch(78% .1 80));box-shadow:0 0 24px color-mix(in oklch,var(--c-brand-accent, oklch(78% .1 80)) 40%,transparent),0 0 0 1px color-mix(in oklch,var(--c-brand-accent, oklch(78% .1 80)) 18%,transparent)}.woj-shader-picker__tile.is-active:after{content:"";position:absolute;bottom:34px;right:6px;width:28px;height:28px;border-radius:50%;background:var(--c-brand-accent, oklch(78% .1 80)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='14' height='14'%3E%3Cpath d='M3 8.5l3.5 3.5 6.5-7' stroke='%23120e08' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") center / 14px 14px no-repeat;box-shadow:0 2px 8px color-mix(in oklch,var(--c-brand-accent, oklch(78% .1 80)) 55%,transparent),0 0 0 1.5px #080a108c;pointer-events:none;z-index:2}.woj-shader-picker__tile-label{font-variant:small-caps;letter-spacing:.06em;font-size:10px}.woj-shader-picker__tile-desc{letter-spacing:.03em}@keyframes shader-crossfade{0%{opacity:0}20%{opacity:1}80%{opacity:1}to{opacity:0;pointer-events:none}}body[data-shader-changing=true]:before{content:"";position:fixed;inset:0;z-index:190;background:#080a10b8;backdrop-filter:blur(6px) saturate(105%);-webkit-backdrop-filter:blur(6px) saturate(105%);animation:shader-crossfade .35s cubic-bezier(.16,1,.3,1) both;pointer-events:all}@media(prefers-reduced-motion:reduce){.woj-shader-picker__tile{transition:border-color .15s,box-shadow .15s}.woj-shader-picker__tile:hover{transform:none;box-shadow:none;border-color:#8a6a3a73}.woj-shader-picker__tile.is-active{transform:none}body[data-shader-changing=true]:before{animation:none;opacity:0}}