/* Project tiles share BodhiX metalwork while retaining each application's real preview. */
body:has(.destination-labs) .project-grid { gap:24px; align-items:stretch; }
body:has(.destination-labs) .lab-project { position:relative; isolation:isolate; display:flex; flex-direction:column; min-width:0; overflow:hidden; border:1px solid #b6c1ca40; border-radius:6px; background:#121416; box-shadow:inset 0 1px #eef2f01a,0 8px 20px #0003; transition:border-color .25s,box-shadow .25s,transform .25s; }
.lab-project,.lab-project * { letter-spacing:0; }
.lab-project::before { content:''; position:absolute; z-index:2; inset:0 0 auto; height:2px; background:linear-gradient(90deg,#ead19b00,#ead19b90 25%,#f7eee0d9 50%,#ead19b90 75%,#ead19b00); pointer-events:none; }
body:has(.destination-labs) .lab-project:is(:hover,:focus-visible) { border-color:var(--project-accent); box-shadow:inset 0 1px #fff3,0 12px 26px #0005; transform:translateY(-4px); }
body:has(.destination-labs) .lab-project:focus-visible { outline:2px solid #e9cb87; outline-offset:4px; }
.lab-project-heading { padding:20px 22px 22px; background:linear-gradient(120deg,#23272b,#15181c 64%); }
.lab-project-meta { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:20px; font:10px/1.4 Consolas,monospace; text-transform:uppercase; color:var(--project-accent); }
.lab-project-meta>span:first-child { border-left:2px solid var(--project-accent); padding-left:9px; }
.lab-project-number { flex-shrink:0; color:#92999e; }
.lab-project-identity { display:grid; grid-template-columns:46px minmax(0,1fr); align-items:center; gap:14px; min-height:68px; }
.lab-project-emblem { display:grid; place-items:center; width:46px; height:50px; color:var(--project-accent); background:linear-gradient(140deg,#e0e6e53b,#30383e 32%,#16191e 61%,#d4dcd928); clip-path:polygon(25% 0,75% 0,100% 25%,100% 75%,75% 100%,25% 100%,0 75%,0 25%); position:relative; }
.lab-project-emblem::before { content:''; position:absolute; inset:2px; background:linear-gradient(140deg,#293239,#101318); clip-path:inherit; z-index:-1; }
.lab-project-emblem .icon { filter:drop-shadow(0 2px 1px #000); }
body:has(.destination-labs) .lab-project h2 { font:800 25px/1.1 var(--display-font); color:#f1f0eb; margin:0 0 8px; overflow-wrap:anywhere; }
.lab-project-heading p { color:#bec4cb; margin:0; font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
body:has(.destination-labs) .lab-project-preview { position:relative; flex-shrink:0; height:auto; aspect-ratio:16/10; padding:15px 14px 20px; background:repeating-linear-gradient(0deg,#c6dfd605 0 1px,transparent 1px 22px),repeating-linear-gradient(90deg,#c6dfd605 0 1px,transparent 1px 22px),#0b0d10; border-top:1px solid #ccd9df17; border-bottom:1px solid #ccd9df21; perspective:900px; overflow:hidden; }
body:has(.destination-labs) .lab-project-preview img { position:relative; display:block; width:100%; height:100%; object-fit:contain; object-position:center; opacity:1; filter:none; border:1px solid #c8d2db42; background:#080a0c; box-shadow:0 12px 14px #0008; transform:rotateX(4deg) translateY(-2px); transform-origin:50% 100%; transition:transform .5s,border-color .4s; }
body:has(.destination-labs) .lab-project:is(:hover,:focus-visible) .lab-project-preview img { transform:rotateX(0deg) translateY(-4px); border-color:var(--project-accent); }
.lab-preview-corners { position:absolute; inset:8px 7px 13px; pointer-events:none; background:linear-gradient(var(--project-accent),var(--project-accent)) left top/14px 1px no-repeat,linear-gradient(var(--project-accent),var(--project-accent)) left top/1px 14px no-repeat,linear-gradient(var(--project-accent),var(--project-accent)) right bottom/14px 1px no-repeat,linear-gradient(var(--project-accent),var(--project-accent)) right bottom/1px 14px no-repeat; opacity:.7; }
.lab-preview-light { position:absolute; pointer-events:none; bottom:0; left:0; width:100%; height:2px; background:linear-gradient(90deg,transparent 30%,var(--project-accent) 50%,transparent 70%); transform:translateX(-100%); animation:lab-project-current 9s ease-in-out infinite; }
.lab-project:nth-child(3n+2) .lab-preview-light { animation-delay:-3s; }
.lab-project:nth-child(3n+3) .lab-preview-light { animation-delay:-6s; }
.lab-project-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:auto; min-height:64px; padding:13px 22px; background:linear-gradient(100deg,#1b1e21,#101215); }
.lab-project-origin { display:flex; align-items:center; gap:9px; font:9px/1.5 Consolas,monospace; color:#d7c394; }
.lab-project-origin img { flex-shrink:0; }
.lab-project-open { display:flex; align-items:center; gap:13px; font-size:11px; font-weight:600; color:#e1e4e7; }
.lab-project-open>span { display:grid; place-items:center; width:30px; height:30px; border:1px solid #e1c6895c; border-radius:50%; color:#ebd197; transition:background .25s,color .25s; }
.lab-project:is(:hover,:focus-visible) .lab-project-open>span { background:#e8ca83; color:#17191b; }
@keyframes lab-project-current { 0%,12% { transform:translateX(-100%); opacity:0; } 32%,68% { opacity:.85; } 88%,100% { transform:translateX(100%); opacity:0; } }
@media(min-width:1101px) { .lab-project-heading { min-height:164px; } }
@media(max-width:1100px) { .lab-project-heading { padding:18px; min-height:154px; } body:has(.destination-labs) .lab-project h2 { font-size:24px; } }
@media(max-width:760px) { body:has(.destination-labs) .project-grid { gap:18px; } .lab-project-heading { padding:17px 16px; min-height:154px; } .lab-project-meta { font-size:9px; margin-bottom:15px; } .lab-project-identity { grid-template-columns:38px minmax(0,1fr); gap:10px; } .lab-project-emblem { width:38px; height:43px; } body:has(.destination-labs) .lab-project h2 { font-size:22px; } .lab-project-heading p { font-size:11px; } .lab-project-footer { padding:12px 16px; gap:8px; } .lab-project-origin { font-size:8px; gap:6px; } .lab-project-open { gap:8px; } }
@media(max-width:480px) { .lab-project-heading { min-height:140px; } }
body:is(.reduced-motion,.reduce-atmosphere) .lab-preview-light { animation:none; display:none; }
body:is(.reduced-motion,.reduce-atmosphere):has(.destination-labs) :is(.lab-project,.lab-project-preview img,.lab-project-open>span) { transition:none!important; transform:none!important; }
body.arena-backgrounded .lab-preview-light { animation-play-state:paused; }
@media(prefers-reduced-motion:reduce) { .lab-preview-light { animation:none; display:none; } body:has(.destination-labs) :is(.lab-project,.lab-project-preview img,.lab-project-open>span) { transition:none!important; transform:none!important; } }