/* MR lab — shell compartido */
:root {
  --black:#000; --white:#F0F0F0; --gray:#888;
  --naranja:#FF4D00; --teal:#21C7B7; --rojo:#E62617; --verde:#3DDC5A;
  --divider:#222;
  --mono:'Geist Mono', ui-monospace, monospace;
  --sans:'Geist', system-ui, sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--black);color:var(--white);font-family:var(--sans);-webkit-font-smoothing:antialiased}
.mono{font-family:var(--mono)}

/* experimento fullscreen */
.exp{position:fixed;inset:0}
.exp canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.exp video{display:none}

.hud{position:fixed;left:0;right:0;display:flex;justify-content:space-between;align-items:center;
  padding:16px 20px;font-family:var(--mono);font-size:12px;color:var(--gray);pointer-events:none;z-index:5}
.hud.top{top:0}
.hud.bottom{bottom:0}
.hud a,.hud button{pointer-events:auto}
.hud a{color:var(--gray);text-decoration:none}
.hud a:hover{color:var(--white)}
.hud .title{color:var(--white)}

.ctl{display:flex;gap:8px;align-items:center}
.btn{font-family:var(--mono);font-size:12px;padding:8px 12px;border:1px solid var(--gray);
  background:none;color:var(--white);cursor:pointer}
.btn:hover{background:var(--white);color:var(--black)}
.btn.on{border-color:var(--verde);color:var(--verde)}
.sens{display:inline-flex;align-items:center;gap:6px;margin-right:4px}
.sens .btn{padding:8px 10px}
.sens-v{font-family:var(--mono);font-size:12px;color:var(--gray);min-width:32px;text-align:center}
input[type=text]{font-family:var(--mono);font-size:12px;padding:8px 10px;background:none;
  border:1px solid var(--divider);color:var(--white);width:130px}
input[type=text]:focus{outline:none;border-color:var(--gray)}

/* índice */
.wrap{max-width:1100px;margin:0 auto;padding:0 24px}
header.idx{padding:48px 0 8px}
header.idx h1{font-family:var(--mono);font-size:15px;font-weight:400}
header.idx p{color:var(--gray);font-size:14px;margin-top:8px;max-width:44em}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1px;background:var(--divider);
  border:1px solid var(--divider);margin:40px 0 64px}
.card{background:var(--black);padding:20px;text-decoration:none;color:var(--white);display:block;min-height:150px;
  transition:background .15s;position:relative}
.heart{position:absolute;top:14px;right:14px;font-size:15px;line-height:1;cursor:pointer;
  color:#333;background:none;border:none;padding:6px;transition:color .15s,transform .1s;font-family:var(--mono)}
.heart:hover{color:var(--gray)}
.heart.liked{color:var(--rojo)}
.heart:active{transform:scale(1.3)}
.card:hover{background:#0d0d0d}
.card .num{font-family:var(--mono);font-size:11px;color:var(--gray)}
.card h2{font-family:var(--mono);font-size:14px;font-weight:500;margin:10px 0 8px}
.card p{font-size:12.5px;color:var(--gray);line-height:1.5}
.card .ref{font-family:var(--mono);font-size:10.5px;color:#555;margin-top:12px;display:block}
footer.idx{padding:24px 0 48px;border-top:1px solid var(--divider);font-family:var(--mono);
  font-size:12px;color:var(--gray);display:flex;justify-content:space-between}
footer.idx a{color:var(--gray)}