/* 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:64px;text-align:center}
.meter{width:64px;height:28px;border:1px solid var(--divider);margin-right:6px;align-self:center}

/* activación de audio en el índice */
.mic-all{margin-top:20px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.mic-note{font-size:11.5px;color:#555}

/* herramientas: siempre arriba, antes de favoritos */
.tools-head{font-family:var(--mono);font-size:13px;color:var(--teal);margin:36px 0 0}
.tools-head + .cards{margin-top:12px}
/* los links dentro de prosa van en teal, no en azul de navegador */
header.idx p a, main > p a{color:var(--teal)}
/* el mapa del flujo: sin esto no se distingue qué controla de qué se mira */
.flujo{font-size:13px;line-height:1.7;color:#8a8a8a;margin:10px 0 0;max-width:74ch}
.flujo b{color:#d8d8d8;font-weight:400}
.flujo + .cards{margin-top:14px}
.cards.tools .card{min-height:auto}

/* favoritos en el índice */
.favs-head{font-family:var(--mono);font-size:13px;color:var(--rojo);margin:36px 0 0}
.favs-head + .cards{margin-top:12px}
.section-head{font-family:var(--mono);font-size:13px;color:var(--gray);margin:8px 0 0}
.section-head + .cards{margin-top:12px}
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)}

/* insignia de cue en las tarjetas del lab: la pone catalogo.js, así el
   índice y la consola no pueden decir cosas distintas */
.card .cue{display:inline-block;margin-top:8px;font-family:var(--mono);
font-size:9px;letter-spacing:.1em;text-transform:uppercase;
color:var(--teal);border:1px solid rgba(33,199,183,.35);padding:2px 6px}