/* AL BASIL OPTICALS · The Physics of Vision lab (vision.js) */
.vz{--vz:#9b7bff;color:#eef0f6}
.vz-cards{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.vz-card{position:relative;display:grid;gap:10px;align-content:start;padding:1.2rem;border-radius:22px;background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02));box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 0 1px rgba(255,255,255,.08)}
.vz-card svg{width:54px;height:54px}.vz-card b{font:500 1.08rem/1.3 var(--display)}
.vz-card__n{position:absolute;top:14px;inset-inline-end:16px;font:500 .7rem var(--mono);color:var(--vz)}
.vz-sim,.vz-pr{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:22px;align-items:start;margin-top:1.4rem}
.vz-stage{position:relative;border-radius:26px;overflow:hidden;background:#06050a;aspect-ratio:4/3;box-shadow:0 0 0 1px rgba(185,162,255,.3),0 30px 70px -30px #000}
.vz-stage canvas{display:block;width:100%;height:100%}
.vz-ring{position:absolute;inset:8%;border-radius:50%;pointer-events:none;opacity:0;transform:scale(1.4);transition:opacity .6s,transform .8s cubic-bezier(.2,.8,.2,1);
  background:radial-gradient(closest-side,transparent 86%,rgba(233,207,149,.55) 93%,transparent 100%),radial-gradient(closest-side at 35% 30%,rgba(255,255,255,.18),transparent 60%)}
.vz-stage.is-fixed .vz-ring{opacity:1;transform:none}
.vz-stage__bar{position:absolute;left:12px;right:12px;bottom:40px;display:flex;gap:8px;flex-wrap:wrap}
.vz-stage__note{position:absolute;left:12px;right:12px;bottom:10px;margin:0;font-size:.74rem;color:rgba(255,255,255,.8);text-shadow:0 1px 6px #000}
.vz-ctrl{display:grid;gap:14px}
.vz-tabs{display:flex;flex-wrap:wrap;gap:6px}
.vz-tab,.vz-chip{border:0;border-radius:999px;padding:.55rem .9rem;color:#fff;font:500 .86rem var(--body);cursor:pointer;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.vz-tab[aria-selected=true],.vz-chip[aria-pressed=true]{background:var(--vz);color:#120c22;font-weight:600}
.vz-sl{display:grid;grid-template-columns:1fr auto;gap:6px;align-items:center;font-size:.9rem;color:#cfd3e0}
.vz-sl b{font:600 1.05rem var(--display);color:#fff}
.vz-sl input{grid-column:1/-1;width:100%;accent-color:var(--vz)}
.vz-fix{border:0;border-radius:999px;padding:.85rem 1.2rem;font:600 1rem var(--body);cursor:pointer;color:#14100a;background:linear-gradient(180deg,#f3dca8,#c9a35c);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 10px 26px -12px #c9a35c}
.vz-fix[aria-pressed=true]{background:rgba(255,255,255,.12);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.vz-read{margin:0;color:#dfe2ec;font-size:.95rem;line-height:1.55}
.vz-read--big{font:500 1.25rem var(--display);color:#fff}
.vz-eye{width:100%;height:auto;border-radius:18px;background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.vz-ray{fill:none;stroke:#ffd27a;stroke-width:1.6;opacity:.9}
.vz-lbl{fill:#aab0c4;font:500 11px var(--body)}
.vz-eye__cap{margin:-6px 0 0;font-size:.85rem;color:#c9cde0}
.vz-pr canvas{display:block;width:100%;aspect-ratio:16/10;border-radius:26px;background:#07060c;box-shadow:0 0 0 1px rgba(185,162,255,.3)}
.vz-mats{display:flex;flex-wrap:wrap;gap:6px}
.vz-chip--blue{justify-self:start}
.vz-h3{margin:.6rem 0 0;font:500 1.15rem var(--display)}
.vz-small{margin:0;color:#c9cde0;font-size:.88rem;line-height:1.5}.vz-small--dim{color:#8f95a8;font-size:.78rem}
.vz-thick{display:grid;gap:8px}
.vz-th{display:grid;grid-template-columns:3.2em 1fr 4.6em;gap:10px;align-items:center}
.vz-th b{font:600 .95rem var(--display)}.vz-th em{font-style:normal;color:#e9cf95;font-size:.88rem;text-align:end}
.vz-th__bar{height:12px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden}
.vz-th__bar i{display:block;height:100%;width:var(--w);border-radius:6px;background:linear-gradient(90deg,#9b7bff,#e9cf95)}
.vz-test{padding:1rem;border-radius:20px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);display:grid;gap:10px;justify-items:start}
.vz-white{position:fixed;inset:0;z-index:200;background:#fff;display:grid;place-items:end center;padding-bottom:40px;cursor:pointer}
.vz-white p{margin:0;color:#888;font:500 .9rem var(--body)}
.vz-end__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
@media (max-width:860px){.vz-cards{grid-template-columns:1fr}.vz-sim,.vz-pr{grid-template-columns:1fr}.vz-stage{aspect-ratio:3/4}.vz-card{grid-template-columns:54px 1fr;align-items:center}}
.vz-th em,.vz-sl b{direction:ltr;unicode-bidi:isolate}
[dir=rtl] .vz-read--big{text-align:end}
/* Inside our machines (machines.js) */
.mc-anchor{position:relative;display:block;height:0;scroll-margin-top:80px}
.mc-tabs{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;margin:1.4rem 0 0;padding-bottom:4px}
.mc-tabs::-webkit-scrollbar{display:none}
.mc-tab{flex:0 0 auto;display:grid;grid-template-rows:auto auto;width:132px;padding:0;border:0;border-radius:18px;overflow:hidden;cursor:pointer;color:#fff;text-align:start;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.mc-tab img{width:100%;height:74px;object-fit:cover;opacity:.75}
.mc-tab span{padding:.5rem .6rem .6rem;font:500 .8rem/1.25 var(--display)}
.mc-tab[aria-selected=true]{box-shadow:inset 0 0 0 2px var(--vz),0 10px 30px -14px var(--vz)}.mc-tab[aria-selected=true] img{opacity:1}
.mc-bench canvas{touch-action:none}
@media (max-width:860px){.mc-bench canvas{aspect-ratio:4/5}.mc-tab{width:112px}.mc-tab img{height:62px}}
/* Inside the eye (eye.js) */
.ey-blk+.ey-blk{margin-top:2.2rem}
.ey-pal{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.ey-sw{display:grid;gap:4px;justify-items:center;text-align:center}
.ey-sw i{width:100%;aspect-ratio:1.6;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
.ey-sw small{font-size:.72rem;color:#c9cde0}
.vz-fix[hidden]{display:none}
