html:has(.page-lab),.page-lab{background:#222221}
.page-lab{--lab-dark:#222221}

/* La frase acompaña al índice y a información, fuera de la pastilla central. */
.page-lab .lab-header-intro{position:absolute;top:17px;left:16px;max-width:28ch;margin:0;color:var(--lab-red);font-family:var(--mono);font-size:var(--body-size);font-weight:400;line-height:var(--body-leading);letter-spacing:-.01em}
.page-lab[data-view="tool"] .lab-header-intro{visibility:hidden}
.page-lab .site-header .lab-title{font-size:15px}
.page-lab .site-header .lab-nav-tab,.page-lab .lab-index-marker,.page-lab .lab-tool-trigger,.page-lab .lab-information-view{text-transform:none}
.page-lab .lab-index-marker{padding-top:0}
.page-lab .lab-tool-trigger:hover,.page-lab .lab-tool-trigger:focus-visible{color:#fff}
.page-lab .lab-tool-list:hover .lab-tool-trigger:not(:hover){color:var(--lab-red)}
.page-lab .lab-index-preview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;max-height:0;margin:0;overflow:hidden;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-10px);transition:max-height .46s cubic-bezier(.22,1,.36,1),margin .46s ease,opacity .28s ease,transform .46s cubic-bezier(.22,1,.36,1),visibility .46s}
.page-lab .lab-tool-visualizer:hover .lab-index-preview,.page-lab .lab-tool-visualizer:focus-within .lab-index-preview{max-height:240px;margin:14px 0 17px;opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.page-lab .lab-index-preview button{min-width:0;padding:0;border:0;background:none;color:var(--lab-red);font-family:var(--mono);font-size:var(--body-size);line-height:var(--body-leading);text-align:left;cursor:pointer}
.page-lab .lab-index-preview img{display:block;width:100%;height:clamp(105px,12vw,168px);object-fit:cover}
.page-lab .lab-index-preview button:nth-child(2) img{object-position:center 31%}
.page-lab .lab-index-preview span{display:block;padding-top:5px}
.page-lab .lab-index-preview button:hover span,.page-lab .lab-index-preview button:focus-visible span{color:#fff}
.page-lab:not(.lab-ready) .lab-index-marker,.page-lab:not(.lab-ready) .lab-tool{opacity:0}
.page-lab.lab-ready .lab-index-marker{animation:lab-list-enter .46s both}
.page-lab.lab-ready .lab-tool{animation:lab-list-enter .52s both}
.page-lab.lab-ready .lab-tool:nth-child(1){animation-delay:.04s}
.page-lab.lab-ready .lab-tool:nth-child(2){animation-delay:.10s}
.page-lab.lab-ready .lab-tool:nth-child(3){animation-delay:.16s}
.page-lab.lab-ready .lab-tool:nth-child(4){animation-delay:.22s}
.page-lab.lab-ready .lab-tool:nth-child(5){animation-delay:.28s}
.page-lab.lab-ready .lab-tool:nth-child(6){animation-delay:.34s}
.page-lab.lab-ready .lab-tool:nth-child(7){animation-delay:.40s}
@keyframes lab-list-enter{from{opacity:0;transform:translate3d(0,-12px,0);filter:blur(2px)}to{opacity:1;transform:translate3d(0,0,0);filter:blur(0)}}

/* El visualizador vive en una página propia dentro de Lab. */
.page-lab .lab-tool-view{min-height:calc(100svh - 150px);padding-top:20vh}
.page-lab .lab-tool-view-head{align-items:start;font-family:var(--mono);font-size:var(--body-size);line-height:var(--body-leading)}
.page-lab .lab-tool-view-head button{grid-column:5/7;justify-self:start;padding:0;border:0;background:none;color:var(--lab-red);font:inherit;cursor:pointer}
.page-lab .lab-tool-view-head button:hover{color:#fff}
.page-lab .lab-tool-view-head span{grid-column:7/11}
.page-lab .lab-environment-choices{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));max-height:none;margin:36px 0 0;overflow:visible;opacity:1;transform:none;visibility:visible;pointer-events:auto;transition:none}
.page-lab .lab-environment-choices button:first-child{grid-column:5/8}
.page-lab .lab-environment-choices button:nth-child(2){grid-column:8/11}
.page-lab .lab-environment-choices button{padding-right:9px}
.page-lab .lab-environment-choices img{height:clamp(175px,22vw,260px)}
.page-lab .lab-workspace{margin-top:36px}
.page-lab .lab-workspace,.page-lab .lab-calculator{scroll-margin-top:75px}
.page-lab .lab-tool-coming{align-content:start;min-height:48vh;padding-top:75px}
.page-lab .lab-tool-coming p{grid-column:7/11;margin:0;font-family:var(--mono);font-size:var(--body-size);line-height:var(--body-leading)}
.page-lab .lab-information-view{padding-top:25vh}
.page-lab .lab-information-intro{grid-column:1/4;max-width:31ch;padding-left:6px;padding-right:15px}
.page-lab .lab-information-intro p:first-child{margin-top:0}
.page-lab .lab-information-resources>div{grid-template-columns:repeat(2,minmax(0,1fr));max-width:740px}
.page-lab .lab-information-resources a{text-transform:none}

/* La pantalla de entrada y el sitio comparten exactamente el mismo gris. */
.page-lab .lab-loader{background:#222221;animation:lab-loader-out .44s 2.15s forwards}
.page-lab .lab-loader::before{background:rgba(189,40,46,.2);animation:lab-loader-flash 2.12s steps(1,end) both}
.page-lab .lab-loader::after{background:#161615;animation:lab-loader-flash-alt 2.12s steps(1,end) both}
.page-lab .lab-loader .lab-loader-logo{position:absolute;top:50%;left:50%;z-index:2;display:flex;align-items:baseline;width:max-content;color:var(--lab-red);font-family:var(--sans);font-size:15px;font-weight:400;line-height:1;letter-spacing:-.035em;white-space:nowrap;transform:translate(-50%,-50%);animation:none}
.page-lab .lab-loader .lab-loader-core,.page-lab .lab-loader .lab-loader-tail{position:static;z-index:auto;display:inline-block;width:auto;font:inherit;letter-spacing:inherit;animation:none}
.page-lab .lab-loader .lab-loader-tail{max-width:76px;overflow:hidden;animation:lab-tail-out .78s .72s cubic-bezier(.76,0,.24,1) forwards}
.page-lab .lab-loader .lab-loader-logo sup{position:absolute;top:-4px;left:calc(100% + 1px);font-family:var(--mono);font-size:9px;line-height:1;letter-spacing:0;opacity:0;animation:lab-b-in .25s 1.48s forwards}
@keyframes lab-tail-out{0%{max-width:76px;opacity:1}90%{opacity:1}100%{max-width:0;opacity:0}}
@keyframes lab-b-in{to{opacity:1}}

@media(max-width:760px){
  .page-lab .lab-header-intro{top:65px;left:10px;max-width:30ch}
  .page-lab .lab-index{padding-top:27vh}
  .page-lab .lab-information-view{padding-top:26vh}
  .page-lab .lab-information-intro{grid-column:1/7;padding-left:2px}
  .page-lab .lab-tool-view{padding-top:23vh}
  .page-lab .lab-tool-view-head button{grid-column:2/6}
  .page-lab .lab-tool-view-head span{grid-column:6/13}
  .page-lab .lab-environment-choices button:first-child{grid-column:2/7}
  .page-lab .lab-environment-choices button:nth-child(2){grid-column:7/12}
  .page-lab .lab-tool-coming p{grid-column:6/13}
}
@media(max-width:500px){
  .page-lab .lab-header-intro{top:62px;left:10px}
  .page-lab .lab-index{padding-top:30vh}
  .page-lab .lab-information-view{padding-top:27vh}
  .page-lab .lab-information-intro{grid-column:1/13;max-width:42ch}
  .page-lab .lab-tool-view{padding-top:23vh}
  .page-lab .lab-tool-view-head button{grid-column:1/6}
  .page-lab .lab-tool-view-head span{grid-column:6/13}
  .page-lab .lab-environment-choices button:first-child{grid-column:1/7}
  .page-lab .lab-environment-choices button:nth-child(2){grid-column:7/13}
  .page-lab .lab-environment-choices img{height:165px}
  .page-lab .lab-index-preview img{height:105px}
  .page-lab .lab-information-resources>div{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .page-lab.lab-ready .lab-index-marker,.page-lab.lab-ready .lab-tool{animation:none}
  .page-lab:not(.lab-ready) .lab-index-marker,.page-lab:not(.lab-ready) .lab-tool{opacity:1}
  .page-lab .lab-index-preview{transition:none}
}